更新记录

0.0.2（2024-10-26） 下载此版本

• feat: 兼容vue2

0.0.1（2024-10-26） 下载此版本

• init

平台兼容性

lime-action-sheet 动作面板

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

安装

在插件市场导入即可，首次导入可能需要重新编译

代码演示

基础用法

动作面板通过 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) => {
   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

list 数据结构

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

Events

Slots

主题定制

样式变量

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

打赏

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