Vue自定義事件之左滑出現刪除按鈕

思路：
　　1.頁面布局
　　2.使用CSS來完成滑動特效
　　3.監控鼠標距離瀏覽器左側的距離，滑動值達到一定范圍后增加class -- swipeleft，只能左滑不能右滑
　　4.每次點擊的時候要判斷當前元素的刪除按鈕是否已經出現，如果是出現，再次點擊當前元素或者是滑動其他元素的時候要關閉顯示刪除按鈕的元素

*{margin:0;padding:0;}
body{font-size:.14rem;}
li{list-style:none;}
i{font-style:normal;}
a{color:#393939;text-decoration:none;}
.list{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid #ddd;}
.list li{overflow:hidden;width:120%;border-bottom:1px solid #ddd;}
.list li a{display:block;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}
.list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;}
.swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}

<section>
 <div class="list">
 <ul>
 <li v-for="(item,index) in touchList"><a href="#" v-vuetouch="{ index: index }" :class="{swipeleft:item.delBtn}">{{item.title}}<i>刪除</i></a></li>
 </ul>
 </div>
</section>

var touchList=[
 {title:"側滑按鈕1",delBtn:false},
 {title:"側滑按鈕2",delBtn:false},
 {title:"側滑按鈕3",delBtn:false}
];

//自定義事件之長按刪除
Vue.directive('vuetouch', function (el,binding) {
 var elIndex=binding.value.index;
 //側滑顯示刪除按鈕
 var container = el;
 var x=0;
 var XX=0;
 container.addEventListener('touchstart', function(event) {
 x = event.changedTouches[0].pageX;
 for(var i=0;i<vm.touchList.length;i++){
 vm.touchList[i].delBtn=false;
 }
 });
 container.addEventListener('touchmove', function(event){
 event.preventDefault();
 XX = event.changedTouches[0].pageX;
 var c=XX-x;
 if(c<0){
 vm.touchList[elIndex].delBtn=true;
 }
 });

});