【Mint-UI】Action sheet 用法及详解（内含取消事件的触发方法）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/NAMECZ/article/details/84336213

鉴于mint-ui官方文档的极简描述和对功能介绍的点到为止，许多功能的完全实现是需要通过阅读源码才可以知道其真正的用法。

今天给大家介绍一下Action sheet的用法，以及我踩过的坑，感觉比较有意义，希望能帮到各位。

效果图：

首先我先带大家看一下官方的介绍：

actions为一个对象数组，页面上以每个对象的name为名称来渲染菜单列表，点击相应的对象名称则会触发相应的method，所以method里我们应该写入希望执行的函数。ok，工作原理了解，下边开始实施。

初版代码：

new Vue({
    el: '#app',
    data:{

        actions:[
            {
                name:"关键字",
                method:this.isKey
            },
            {
                name:"时间",
                method:this.isTime
            }
            ],
         sheetVisible:false,
    },

    mounted:function(){
        openSheet(){
            this.sheetVisible=!this.sheetVisible;
        },
        isKey(){
            console.log("关键字");
        },
        isTime(){
            console.log("时间");
        }
    }
  })

代码写的非常漂亮，不过运行起来就发现一个致命的问题，当我点击菜单项后触发不了method中的函数，经测试，发现method中的this指向有问题，这里的this指向actions。ok，发现问题后，我很快就推出了二版代码。

二版代码：

new Vue({
    el: '#app',
    data(){
        let that = this;
        return{
            actions:[
                {
                    name:"关键字",
                    method:that.isKey
                },
                {
                    name:"时间",
                    method:that.isTime
                }
            ],
            sheetVisible:false,
        }
        
    },
    mounted:function(){
        openSheet(){
            this.sheetVisible=!this.sheetVisible;
        },
        isKey(){
            console.log("关键字");
        },
        isTime(){
            console.log("时间");
        },
    }
  })

此处data应该是json格式，但是为了改变this的指向，我们将data写为函数，将json数据通过函数return出来，此时data的数据格式仍为json。所以代码可以正常运行。Action sheet 可以正常运行。

但是一些小伙伴们希望取消的时候也能够触发回调函数，文档上关于这一块的是一片空白。但是这怎么能难得到我们这些个聪明伶俐的程序员呢。我想到了利用vue的监听事件模拟取消事件的触发。好了，思路清晰，终极代码如下所示

终极js代码:

new Vue({
    el: '#app',
    data(){
        let that = this;
        return{
            actions:[
                {
                    name:"关键字",
                    method:that.isKey
                },
                {
                    name:"时间",
                    method:that.isTime
                }
            ],
            sheetVisible:false,
            sheetCancel:true,//打开取消事件
        }
        
    },
    watch:{
        sheetVisible:function(newvs,oldvs){//如果sheetVisible的值为false，即弹窗关闭
            if(!newvs && this.sheetCancel){//并且sheetCancel的值为true的时候触发取消事件
                this.Cancel();
            }
        }
    },
    mounted:function(){
        openSheet(){
            this.sheetVisible=!this.sheetVisible;
            this.sheetCancel=true;//打开取消事件
        },
        isKey(){
            console.log("关键字");
            this.sheetCancel=false;//关闭取消事件
        },
        isTime(){
            console.log("时间");
            this.sheetCancel=false;//关闭取消事件
        },
        Cancel(){
            console.log("取消")
        }
    }
  })

页面效果如效果图所示。

如果恰巧这篇文章能够帮到你，请不要吝啬您的评论和赞哦~