vue项目小点（一）

xxx(){
  // 销毁组件
  this.$destroy(true);
  this.$el.parentNode.removeChild(this.$el);
}

this.$forceUpdate();

<ul>
  <li 
    v-for="(item,index) in list"
    :class="{move:candelete.id==item.id}"
    @touchstart="touchStart(item)"
    @touchend="touchEnd(item)"
  >
    {{item.text}}{{item.id}}
    <div class="del" @click="deleteItem(index)">删除</div>
  </li>
</ul>

li{
  background: #fdfdfd;
  border-bottom: 1px solid #e1e1e1;
  line-height: 40px;
  position: relative;
  transform: translateX(0);
  transition: all .3s; /*滑动效果更生动*/
  padding-left: 10px;
}
ul{
  overflow-x: hidden; /*隐藏ul x轴的滚动条*/
}
li.move {
  transform: translateX(-60px); /*滑动后x轴位移-60px,使其可见*/
}
.del {
  position: absolute;
  top: 0;
  right: -1px;
  z-index: 3;
  width: 60px;
  height: 100%;
  text-align: center;
  color: #fff;
  background-color: #ff5b45;
  transform: translateX(60px); /*默认x轴位移60px，使其隐藏*/
}

data() {
  return {
    // 数据
    list: [{
      id: 1,
      text: '请左滑动删除我吧'
    },{
      id: 2,
      text: '请左滑动删除我吧'
    },{
      id: 3,
      text: '请左滑动删除我吧'
    },{
      id: 4,
      text: '请左滑动删除我吧'
    },{
      id: 5,
      text: '请左滑动删除我吧'
    },{
      id: 6,
      text: '请左滑动删除我吧'
    }],
    clientNum: {}, // 记录开始滑动（x1）,结束滑动（x2）的鼠标指针的位置
    candelete: {}, // 滑动的item
  }
}

methods: {
  /**
    * 删除item
  * index是下标
  */
  deleteItem(index){
  this.list.splice(index, 1)
  // splice方法是删除数组某条数据，或者向某个位置添加数据
  },
  touchStart(item) {
  let touchs = event.changedTouches[0];
  // 记录开始滑动的鼠标位置
  this.clientNum.x1 = touchs.pageX;
  this.candelete = {};
  },
  touchEnd(item) {
  let touchs = event.changedTouches[0];
  // 记录结束滑动的鼠标位置
  this.clientNum.x2 = touchs.pageX;
  this.candelete = {};
  // 判断滑动距离大于50，判定为滑动成功，否则失败
  if (
    this.clientNum.x2 < this.clientNum.x1 &&
    Math.abs(this.clientNum.x1) - Math.abs(this.clientNum.x2) > 50
  ) {
    event.preventDefault();
    this.candelete = item;
  } else if (
    this.clientNum.x2 > this.clientNum.x1 &&
    Math.abs(this.clientNum.x2) - Math.abs(this.clientNum.x1) > 10
  ) {
    event.preventDefault();
    this.candelete = {};
  }
  }
}

<template>
  <div class="eat">
    <FoodIndex v-for="(item,index) in products" :key="index" :datas="item" :dataindex="index"></FoodIndex>
  </div>
</template>

<template>
    <div @touchstart="touchStart" @touchend="touchEnd()"  :class="{move:isSdele}" class="list">
      <div class="mack">
          <span class="syn">
            <p class="tit">{{datas.product_name}}</p>
            <span class="des">{{datas.product_attr}}</span>
            <br/>
            <span class="price">$32.00</span>
          </span>
        <div class="del" @click="deleteItem(dataindex)">
          <img src="../assets/images/delete.png" alt="">
        </div>
      </div>
    </div>
</template>

props:{
  datas:{
     type:Object,
   },
   dataindex:{
      type: Number
   }
},
data(){
   return{
      isSdele:false,
    }
},     

<div class="left-nav">
  <div class="box box1">
     <router-link :to="{path:'/index'}">
       <div class="des desed">收银</div>
     </router-link>
  </div>
   <div class="box box2">
     <router-link :to="{path: '/login'}">
      <div class="des">订单</div>
     </router-link>
   </div>
</div>

.box{
        width: 100%;
        text-align: center;
        margin-bottom: 36vh/@win;
        position: relative;
        a{
          display: inline-block;
          width: 100%;
          height: 100%;
        }
        .des{
          font-size:16vh/@win;
          font-family:SourceHanSansCN-Normal;
          font-weight:400;
          color:rgba(255,255,255,1);
          line-height:51vh/@win;
          text-align: center;
  }
}
      
.box1{
    a{
      background: url("../assets/images/tex.png") top center no-repeat;
      -webkit-background-size: 30vw/@wid ;
      background-size: 30vw/@wid;
       padding-top: 25vw/@wid;
     }
     .router-link-active{
        display: inline-block;
        background: url("../assets/images/pay.png") top center no-repeat;
        -webkit-background-size: 30vw/@wid ;
        background-size: 30vw/@wid;
         padding-top: 25vw/@wid;
      }
}
.box2{
     a{
          background: url("../assets/images/tex.png") top center no-repeat;
          -webkit-background-size: 30vw/@wid ;
          background-size: 30vw/@wid;
          padding-top: 25vw/@wid;
        }
        .router-link-active{
          display: inline-block;
          background: url("../assets/images/pay.png") top center no-repeat;
          -webkit-background-size: 30vw/@wid ;
          background-size: 30vw/@wid;
          padding-top: 25vw/@wid;
       }
}