H5使用plus.nativeUI.actionSheet报错

 plus.nativeUI.actionSheet({
        title: "标段选择",
        cancel: "取消",
        buttons: this.sectionselect
      }

使用ActionSheet插件替代
https://ext.dcloud.net.cn/plugin?id=2638

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

引用组件

<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(); // 隐藏
上一篇:jQuery设置input的disable属性,prop和attr的区别


下一篇:Delphi 运行代码错误:cannot focus a disabled or invisible window