更新记录

0.0.9（2025-08-31） 下载此版本

• chore: 更新文档

0.0.8（2025-04-26） 下载此版本

• feat: 兼容uniappx 鸿蒙next

0.0.7（2025-04-12） 下载此版本

• chore: 更新文档

平台兼容性

uni-app(4.73)

uni-app x(4.75)

其他

lime-action-sheet 动作面板

一个功能丰富的动作面板组件，用于展示一组与当前情境相关的操作选项。支持标题、取消按钮、自定义内容等多种配置，可用于分享、操作确认、筛选等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的交互需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 动作面板文档 - 站点1
• 动作面板文档 - 站点2
• 动作面板文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-action-sheet
2. 导入后可能需要重新编译项目
3. 在页面中使用l-action-sheet组件

代码演示

基础用法

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

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

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

展示图标

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

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

const show = ref(false);
const list = [
    { label: '选项一', icon: 'app'},
    { label: '选项二', icon: 'app'},
    { label: '选项三', icon: 'app'},
];
const  = (index:number, item: UTSJSONObject) => {
   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' },
]

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

插件标签说明

l-action-sheet 为组件标签
lime-action-sheet 为演示标签

API文档

Props 属性说明

list 数据结构

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

Events 事件

Slots 插槽

主题定制

组件提供了以下CSS变量，可以通过自定义CSS变量来自定义组件样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助