鉴于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("取消")
}
}
})
页面效果如效果图所示。
如果恰巧这篇文章能够帮到你,请不要吝啬您的评论和赞哦~