主题
ActionSheet 上拉菜单
从底部展示一组可选操作,并可显示取消按钮。
支持平台
以下为官网文档所列的平台支持情况,具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 选择菜单项或取消后由页面更新 showMenu -->
<fui-actionsheet :show="showMenu" :itemList="['拍照', '从相册选择']"
@click="handleAction" @cancel="showMenu = false" />属性
字号单位为 rpx。
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| show | Boolean | 是否显示 | false |
| itemList | Array | 菜单项,可使用字符串或对象 | [] |
| textKey | String | 菜单项文本字段名 | text |
| itemSize | Number / String | 菜单项字号 | 32 |
| itemColor | String | 浅色主题的菜单项颜色 | #181818 |
| itemDarkColor | String | 深色主题的菜单项颜色 | #D1D1D1 |
| tips | String | 顶部提示信息 | - |
| color | String | 提示文字颜色 | #7F7F7F |
| size | Number / String | 提示文字字号 | 26 |
| radius | Boolean | 是否使用圆角 | true |
| isCancel | Boolean | 是否显示取消按钮 | true |
| cancelSize | Number / String | 取消按钮字号 | 32 |
| theme | String | 主题:light 或 dark | light |
| maskClosable | Boolean | 点击遮罩是否触发取消 | false |
| zIndex | Number / String | 层级,nvue 不支持 | 1001 |
| safeArea | Boolean | 是否适配底部安全区 | true |
对象菜单项可使用 text、color、darkColor、size 设置文字及样式,文本字段名可通过 textKey 调整。
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| click | 点击菜单项时触发 | 包含 index 和当前项字段的对象 |
| cancel | 点击取消按钮或可关闭的遮罩时触发 | 无 |
父组件需要根据事件更新 show。nvue 的显示层级受元素顺序影响。
插槽
| 插槽 | 说明 |
|---|---|
| — | 官网未列出该组件的插槽 |