vue插件集合18:vue实现长按删除方法
1:template中<div v-for="(item,index) in arr" :key="item.id" @touchstart.prevent="touchinUk(index)"@touchend.prevent="cleartime(index)"><div&
·
1:template中
<div v-for="(item,index) in arr" :key="item.id" @touchstart.prevent="touchinUk(index)" @touchend.prevent="cleartime(index)">
<div>
<p>{{item.address}}</p>
<p>备注:{{item.remarks}}</p>
</div>
<div>
<i class="iconfont icon-gengduo"></i>
</div>
</div>
2:data
arr: [{
address: "0X21458151815165146156610561056-1",
remarks: "imtoken"
}, {
address: "0X21458151815165146156610561056-2",
remarks: "imtoken"
},
{
address: "0X21458151815165146156610561056-3",
remarks: "imtoken"
},
],
3:methods
touchin(index) {
console.log(index)
clearInterval(this.Loop); //再次清空定时器,防止重复注册定时器
this.Loop = setTimeout(function() {
this.$dialog.confirm({
message: '是否删除地址'
}).then(() => {
console.log("删除")
this.arr.splice(index, 1);
}).catch(() => {
// on cancel
console.log("不删")
});
}.bind(this), 1000);
},
cleartime(index) {
// 这个方法主要是用来将每次手指移出之后将计时器清零
clearInterval(this.Loop);
},
更多推荐
已为社区贡献8条内容
所有评论(0)