vue swipe left to delete function example code

<template>
 <div class="slider-item">
 <div
  class="content"
  @touchstart='touchStart'
  @touchmove='touchMove'
  @touchend='touchEnd'
  :style="deleteSlider"
 >
  <div class="remove">delete</div>
 </div>
 </div>
</template>
<script>
// Get the width of the delete button, which is the maximum distance to slide the slider to the leftconst DELBTNWIDTH = 60;
export default {
 data() {
 return {
  startX: 0, // Start pos  endX: 0, // End pos  moveX: 0, // Pos when sliding  disX: 0, // Sliding distance  deleteSlider: 'transform:translateX(0px)',
 };
 },
 methods: {
 touchStart(timestamp, ev) {
  ev = ev || event;
   = timestamp;
   = 0;
  // Touches class array, if equal to 1, it means that there is only one finger touching the screen at this time.  if ( === 1) {
  // Record start position   = [0].clientX;
  (, );
  }
 },
 touchMove(timestamp, ev) {
  ev = ev || event;
  if ( === 1) {
  // Real-time distance from the left side of the browser when sliding   = [0].clientX;
  //Real-time sliding distance is connected to the last sliding.  Prevent the problem of wrong position during the second trigger   =  -  + ;
  // If you slide to the right or not, do not change the position of the slider  if ( > 0) {
   if ( < 100) {
    = 'transform:translateX(-' +  + 'px)';
   } else {
    = 'transform:translateX(-100px)';
   }
  } else {
   if ( < -60) {
    = 'transform:translateX(60px)';
   } else {
    = 'transform:translateX(' + () + 'px)';
   }
  }
  }
 },
 touchEnd() {
  //After the slider is completed, the position should be in  if ( < 100) {
   = 'transform:translateX(0px)';
   = 0;
  } else {
   = 'transform:translateX(-' + DELBTNWIDTH + 'px)';
   = 60;
  }
 },
 },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.slider-item {
 width: 100%;
 height: 60px;
 border-bottom: 1px solid #eeeeee;
 overflow: hidden;
 display: flex;
 position: relative;

 .content {
 min-width: 100%;
 height: 100%;
 background: yellow;
 box-sizing: normal-box;
 padding-right: 60px;
 position: relative;
 transition-property: all;
 transition-duration: 0.4s;
 transition-timing-function: cubic-bezier(0, 0.85, 0.72, 0.86);
 transition-delay: 0s;

 .remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: #fe5ba8;
  text-align: center;
  line-height: 60px;
  font-size: 15px;
  color: #ffffff;
 }
 }
}
</style>