vue-cli使用mui的左滑删除，效果如图。点击后显示删除弹框删除后自动隐藏红色块。
<template> <div class="mui-conent"> <div>mui的左滑删除</div> <div class="mui-table-view"> <div class="mui-input-group mui-table-view-cell " v-for="(elem,index) in fileListInfo" :key="index" ref="parentLi" > <div class="mui-slider-handle fileListBox">{{elem}}</div> <div class="mui-slider-right mui-disabled mui-tab-item fileListDele" @click="tabDele(index,elem)" > <a class="mui-btn mui-btn-red">删除</a> </div> </div> </div> </div> </template> <script> export default { name: "swiperLeft", data() { return { fileListInfo: ["第一列", "第二列","第三列","第四列"], confirmDate: "确认删除该文件？", //滑动列表删除键后的弹框信息 }; }, methods: { //给下拉是列表中的滑动删除添加点击事件 tabDele: function(index, id) { //通过ref获取到当前点击的列表 var curChild = this.$refs.parentLi[index]; var mui = this.mui; //预先保留this指向 var $this = this; //mui的弹框信息 mui.confirm(this.confirmDate, name, btnArray, function(e) { if (e.index == 1) { //点击确认后删除当前的数组信息 $this.fileListInfo.splice(index,1) //删除后关闭滑动的红色删除块 mui.swipeoutClose(curChild); } else { setTimeout(function() { mui.swipeoutClose(curChild); }, 0); } }); //提示的信息 var btnArray = ["确认", "取消"]; } }, mounted() { var mui = this.mui; //mui初始化 mui.init({ gestureConfig: { tap: true, //默认为true-----单击事件 doubletap: true, //默认为false-----双击事件 longtap: true, //默认为false-------长按事件 swipe: true, //默认为true------滑动事件 drag: true, //默认为true------拖动事件 hold: false, //默认为false，不监听-------按住屏幕事件 release: true //默认为false，不监听-------------离开屏幕事件 } }); } }; </script> <style> .mui-table-view-cell{ height:40px; line-height: 40px; } </style>
