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;
        }
    });

});