更新记录

1.0.6（2020-09-01）

修复布局异常

1.0.5（2020-09-01）

底层组件wyb-popup更新

1.0.4（2020-09-01）

底层组件wyb-popup更新

平台兼容性

一、使用说明

1. 解压下载的压缩包，将组件放在项目的components目录下

2. 引用组件

   <wyb-action-sheet ref="actionSheet" :options="options" @itemclick="onItemClick"/>

   import wybActionSheet from '@/components/wyb-action-sheet/wyb-action-sheet.vue'
   export default {
       components: {
           wybActionSheet
       },
       data() {
           return {
               // 这里的options有两种写法
               // 简写形式：
               options: ['红豆生南国', '春来发几枝', '愿君多采撷', '此物最相思'],
               // 完整形式
               options: [{
                   label: '红豆生南国', // 显示的文字
                   color: '#00a392',  // 文字颜色
                   fontSize: '35px',  // 文字大小
                   disabled: false    // 是否禁用
               }, {
                   label: '春来发几枝',
                   color: '#00a392',
                   fontSize: '',
                   disabled: false
               }, {
                   label: '愿君多采撷',
                   color: '',
                   fontSize: '35px',
                   disabled: false
               }, {
                   label: '此物最相思',
                   color: '',
                   fontSize: '',
                   disabled: true
               }]
           }  
       },
       methods: {
           onItemClick(e) {
               let index = e.index
               let label = e.label
               uni.showToast({
                   title: JSON.stringify(e),
                   icon: 'none'
               })
           }
       }
   }

   // onReady()生命周期之后调用
   this.$refs.actionSheet.showActionSheet(); // 显示
   this.$refs.actionSheet.hideActionSheet(); // 隐藏

3. Demo体验地址：点我访问（请用手机访问，或用桌面浏览器启动手机调试模式）

4. 如果觉得我的插件还不错，可以下载我的插件的示例集合Demo => 传送门，里面有我全部的插件以及全部插件的示例工程

二、参数说明

1. Props

   参数名	类型	默认值	说明	可选值
   type	String	'material'	操作菜单的风格	material | ios
   options	Array	['a', 'b', 'c']	选项的配置对象，具体使用见上面的引用组件部分
   mask-click-close	Boolean	true	点击遮罩是否可以关闭菜单	true | false
   mask-alpha	Number	0.6	遮罩的透明度
   duration	Number	300	动画的演出时长
   show-cancel	Boolean	true	是否显示取消按钮	true | false
   cancel-text	String	'取消'	取消按钮的文字
   cancel-color	HexColor, RgbColor	material风格：'#333' ios风格：'#fa3534'	取消按钮的颜色
   cancel-font-size	String	'35rpx'	取消按钮的文字大小
   bottom-fit	String, Number	0	底部适配距离（异形屏移动设备遮挡组件时使用）

2. Events

   事件名	说明	返回值
   @itemclick	点击选项的回调	event={index, label}
   @show	菜单显示后的回调
   @hide	菜单关闭后的回调