LimeActionSheet 动作面板

• 底部弹起的模态面板，包含与当前情境相关的多个选项，兼容uniapp/uniappx。
• 插件依赖lime-popup,lime-style,lime-shared,lime-icon,lime-overlay,lime-transition,不喜勿下

安装

导入即可，首次导入可能需要重新编译

注意

• 🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
• 🔔 不需要lime-svg在lime-icon代码中注释掉即可

// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

文档

action-sheet

代码演示

基础用法

动作面板通过 list 属性来定义选项，list 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档下方表格。

<button @click="show = true">基础用法</button>
<l-action-sheet v-model="show" :list="list" @select="onSelect" />

const show = ref(false);
const list = [
      { label: '选项一' },
      { label: '选项二' },
      { label: '选项三' },
    ];
const onSelect = (index:number) => {
   console.log('index', index)
};

展示图标

使用 list 的 icon 字段可以为选项设置图标。

<button @click="show = true">展示图标</button>
<l-action-sheet v-model="show" :list="list" @select="onSelect" />

const show = ref(false);
const list = [
    { label: '选项一', icon: 'app'},
	{ label: '选项二', icon: 'app'},
	{ label: '选项三', icon: 'app'},
];
const onSelect = (index:number) => {
   console.log('index', index)
};

展示取消按钮

设置 cancel-text 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 cancel 事件。

<button @click="show = true">展示图标</button>
<l-action-sheet v-model="show" :list="list" @cancel="onCancel" cancel-text="取消"/>

const show = ref(false);
const list = [
    { label: '选项一' },
    { label: '选项二' },
    { label: '选项三' },
];
const onCancel = () => {
	console.log('取消')
};

展示描述信息

通过 description 可以在菜单顶部显示描述信息。

<l-action-sheet
  v-model="show"
  :list="list"
  cancel-text="取消"
  description="这是一段描述信息"
/>

const show = ref(false);
const list = [
    { label: '选项一' },
    { label: '选项二' },
    { label: '选项三' },
];

选项状态

可以通过 disabled 将选项设置为禁用状态，或者通过color设置选项的颜色

<l-action-sheet
  v-model="show"
  :list="list"
  cancel-text="取消"
/>

const show = ref(false);
const actions = [
    { label: '着色选项', color: '#ee0a24' },
    { label: '禁用选项', disabled: true },
];

宫格型

通过rowCol属性设置每行列数，如[4, 8]表示第一行有4列，第二行有8列。超过4列时会出现滚动条。

<l-action-sheet v-model="show" :rowCol="[4, 8]" :list="grid" @select="select" cancelText="取消" description="这是一段描述信息"></l-action-sheet>

const show = ref(false);
const grid = [
	{ label: '微信', icon: 'https://tdesign.gtimg.com/mobile/demos/wechat.png', radius: '0' }, //设置圆角
	{ label: '朋友圈', icon: 'https://tdesign.gtimg.com/mobile/demos/times.png', radius: '0' },
	{ label: 'QQ', icon: 'https://tdesign.gtimg.com/mobile/demos/qq.png', radius: '0' },
	{ label: '企业微信', icon: 'https://tdesign.gtimg.com/mobile/demos/wecom.png', radius: '0'},
	{ label: '收藏', icon: 'share', color: '#ddd' }, //文本或图标颜色
	{ label: '下载', icon: 'download', iconColor: '#ddd' },//图标颜色
	{ label: '编辑', icon: 'edit', bgColor: '#0bc15f'},//图标背景颜色
	{ label: '选项', icon: 'app',fontSize: '28rpx' },//文本或图标大小
	{ label: '选项', icon: 'app' },
	{ label: '选项', icon: 'app', disabled: true},
	{ label: '选项', icon: 'app' },
	{ label: '选项', icon: 'app' },
]

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-action-sheet/compoents/lime-action-sheet -->
<lime-action-sheet />

插件标签

• 默认 l-action-sheet 为 component
• 默认 lime-action-sheet 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Props

参数	说明	类型	默认值
v-model	是否显示动作面板	boolean	false
list	面板选项列表	ActionSheetItem[]	[]
title	顶部标题	string	-
cancel-text	取消按钮文字	string	-
align	对齐方式，可选center|left	string	center
description	选项上方的描述信息	string	-
safe-area-inset-bottom	是否开启底部安全区适配,未实现	boolean	true

list 数据结构

list 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：

键名	说明	类型
label	标题	string
color	选项文字颜色	string
icon	选项图标名称或图片链接	string
iconColor	选项图标颜色	string
bgColor	选项图标背景颜色	string
fontSize	选项字体大小	string
radius	选项图标圆角	string
disabled	是否为禁用状态	boolean

Events

事件名	说明	回调参数
select	点击选项时触发，禁用或加载状态下不会触发	index: number
cancel	点击取消按钮时触发	-

Slots

名称	说明	参数
description	自定义描述文案	-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，uvue app无效。

名称	默认值	描述
--l-action-sheet-item-height	112rpx	-
--l-action-sheet-item-disabled-color	$text-color-4	-
--l-action-sheet-hover-color	$fill-3	-
--l-action-sheet-gap-height	16rpx	-
--l-action-sheet-gap-color	$bg-color-page	-
--l-action-sheet-color	text-color-1	-
--l-action-sheet-border-radius	$border-radius-lg	-
--l-action-sheet-description-color	$text-color-3	-
--l-action-sheet-description-font-size	$font-size-3	-
--l-action-sheet-text-align	center	-
--l-action-sheet-font-size	$font-size-md	-
--l-action-sheet-cancel-height	96rpx	-
--l-action-sheet-cancel-color	$text-color-1	-
--l-action-sheet-image-size	96rpx	-
--l-action-sheet-image-bg-color	$fill-3	-
--l-action-sheet-icon-size	48rpx	-
--l-action-sheet-col-text-padding	24rpx	-

常见问题

插件包含一下lime-svg为收费插件。如果你不需要svg，可以在lime-icon里注释掉，lime-svg为APP原生插件，收费为1元，源码为5元。如果你需要svg，可以考虑一下购买。

// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码