vue自定义指令-左滑出现删除按钮

直接上代码：

<template>
  <div class="wrapper">
    <ul class="app-list">
      <li v-for="(item, index) in appList" :key="index" class="app-item">
        <div class="app-info_wrapper">
          <div class="app-info"  :class="{swipeleft:item.delBtn}" v-vuetouch="{ index:index,appList:appList}">
            <p>{{ item.label }}</p>
            <div class="team">我的团队</div>
          </div>
          <div class="icon-del" :class="{swipeleft:item.delBtn}" @click.stop="del(index)">删除</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
/* global HWH5 */
export default {
  data() {
    return {
      appList: [
        {label: "新手指引",delBtn:false},
        {label: "明日之星投票",delBtn:false},
        {label: "核酸检测反馈",delBtn:false},
        {label: "春节加班&出行申报",delBtn:false},
      ],
    };
  },
  directives: {
    vuetouch (el,binding,vnode) {
      var elIndex=binding.value.index;
      var appList = binding.value.appList;
      //侧滑显示删除按钮
      var container = el;
      var x=0;
      var XX=0;
      container.addEventListener('touchstart', function(event) {
          x = event.changedTouches[0].pageX;
          for(var i=0;i<appList.length;i++){
              appList[i].delBtn=false;
          }
      });
      container.addEventListener('touchmove', function(event){
          event.preventDefault();
          XX = event.changedTouches[0].pageX;
          var c=XX-x;
          if(c<0){
              appList[elIndex].delBtn=true;
          }
      });
    }
  },
  methods:{
    del(index){
      this.appList.splice(index,1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../style/mixin.scss';
$baseFontSize: 108px;
@function px2rem($px) {
  @return $px / $baseFontSize * 1rem;
}
.wrapper {
  padding: px2rem(20px) 0;
  font-size: fontSize(12);
}
.app-list {
  background-color: #fff;
  > li.app-item {
    height: px2rem(193px);
    position:relative;
    width:px2rem(1080px);
    -webkit-transition:all 0.3s linear;
    transition:all 0.3s linear;
    overflow: hidden;
    &:not(:last-child) {
      border-bottom: px2rem(1px) solid #e5e5e5;
    }
    .app-info_wrapper{
      width:px2rem(1248px);
    }
    .app-info{
      width:px2rem(1080px);
      padding: px2rem(42px) px2rem(48px) px2rem(42px) px2rem(72px);
      box-sizing: border-box;
      display: flex;
      float:left;
    }
    p {
      width: px2rem(516px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: fontSize(14);
      color: #333333;
      height: px2rem(108px);
      line-height: px2rem(108px);
      margin-left: px2rem(36px);
    }
    .team{
      width: px2rem(300px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: fontSize(14);
      color:#999;
      line-height: px2rem(108px);
      height: px2rem(108px);
      text-align: right;
    }
    .icon-del{
      height: px2rem(192px);
      line-height: px2rem(192px);
      width: px2rem(168px);
      background: #fd6060;
      float:left;
      text-align: center;
      color: #fff;
    }
  }
}
.swipeleft{
  transform:translateX(px2rem(-168px));
  -webkit-transform:translateX(px2rem(-168px));
}
</style>

1、指令如何操作 data中的数据，可以传入指令当中，通过binding.value.applist获取数据

2、 布局分为两部分，注意指令的位置