miniprogram-actionSheet

小程序自定义组件 - 操作菜单

使用方法

1. 安装 miniprogram-actionsheet

npm install --save @carpenter/miniprogram-actionsheet

2. 在需要使用 miniprogram-actionsheet 的页面 page.json 中添加 miniprogram-actionsheet 自定义组件配置

{
  "usingComponents": {
    "actionsheet": "@carpenter/miniprogram-actionsheet",
  }
}

3. 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 部分