1.1.0 • Published 5 years ago
@carpenter/miniprogram-actionsheet v1.1.0
miniprogram-actionSheet
小程序自定义组件 - 操作菜单
使用方法
- 安装 miniprogram-actionsheet
npm install --save @carpenter/miniprogram-actionsheet
- 在需要使用 miniprogram-actionsheet 的页面 page.json 中添加 miniprogram-actionsheet 自定义组件配置
{
"usingComponents": {
"actionsheet": "@carpenter/miniprogram-actionsheet",
}
}
- WXML 文件中引用 miniprogram-actionsheet
<!-- <button bindtap="actionSheetToggle">click me</button> -->
<actionsheet
status="{{ asStatus }}"
actionList="{{ actionList }}"
bindclose="actionSheetToggle"
bindaction="actionSheetReceive"
/>
<!-- <actionsheet
status="{{ asStatus }}"
bindclose="actionSheetToggle"
>
<view class="iten-container">
<view class="item">分享好友</view>
<view class="item">编辑</view>
<view class="item">删除</view>
</view>
</actionsheet> -->
miniprogram-actionsheet 参数
属性名 | 类型 | 默认值 | 是否必须 | 说明 |
---|---|---|---|---|
status | Boolean | false | 是 | 是否显示 |
actionList | Array | [] | 否 | 菜单内容 |
close | Function | 是 | triggerEvent | |
action | Function | 否 | triggerEvent |
actionList
属性名 | 类型 | 默认值 | 是否必须 |
---|---|---|---|
key | 否 | ||
name | String | 是 | |
color | String | 否 |
key = 'share' 展示button open-type="share"组件,分享截图会有半透明遮罩层,暂无解决办法,建议使用自定义分享图片,
Page({ data: { asStatus: false, actionList: [ { key: 'share', name: '分享好友', }, { key: 'edit', name: '编辑', }, { key: 'delete', name: '删除', color: 'red' } ], }, actionSheetToggle() { this.setData({ asStatus: !this.data.asStatus, }) }, actionSheetReceive(event) { const {key} = event.detail switch (key) { case 'share': console.log('点击分享') break case 'edit': console.log('点击编辑') break case 'delete': console.log('点击删除') break default: break } this.actionSheetToggle() } })
slot
自定义 actionList 部分