微信小程序 WeUI·操作按钮组件
ActionSheet
底部弹起的操作按钮组件
代码引入
在 page.json 中引入组件
{
"usingComponents": {
"mp-actionSheet": "../../components/actionsheet/actionsheet"
}
}
示例代码
<!--WXML示例代码-->
<mp-actionSheet bindactiontap="btnClick" show="{{showActionsheet}}" actions="{{groups}}" title="这是一个标题，可以为一行或者两行。">
</mp-actionSheet>
Page({
data: {
showActionsheet: false,
groups: [
{ text: '示例菜单', value: 1 },
{ text: '示例菜单', value: 2 },
{ text: '负向菜单', type: 'warn', value: 3 }
]
},
close: function () {
this.setData({
showActionsheet: false
})
},
btnClick(e) {
console.log(e)
this.close()
}
})
效果展示
属性列表
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| title | string | 否 | 标题 | |
| show-cancel | boolean | true | 否 | 是否显示取消按钮 |
| cancel-text | string | 否 | 取消按钮的文本 | |
| mask-class | string | 否 | 背景蒙层的class | |
| ext-class | string | 否 | ActionSheet额外的class | |
| mask-closable | boolean | true | 否 | 点击背景蒙层是否可以关闭ActionSheet |
| mask | boolean | true | 否 | 是否显示背景蒙层 |
| show | boolean | false | 否 | 是否显示ActionSheet |
| actions | Array | false | 是 | ActionSheet的按钮项的配置，每一项是包含text、value、type的Object，type的取值为warn和default，表示两种样式 |
| bindclose | eventhandler | 否 | 点击背后的mask关闭掉ActionSheet触发的事件 | |
| bindactiontap | eventhandler | 否 | 点击ActionSheet的按钮项触发的事件，detail为{ value, index } |
Slot
| 名称 | 描述 |
|---|---|
| title | 标题区域slot |