vue3的uniapp，左滑出现删除按钮

<template>
  <view class="box">
    <view class="view_slider" v-for="(item,index) in dataForm.list">
      <view class="left_slider" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd(index)">
        <view class="left_slider_clone">
          left盒子
        </view>
      </view>
      <view class="right_slider" :class="{ hide: !item.select }" @click="handleDel(index)">
        取消
      </view>
    </view>
  </view>
</template>

<script setup>
  import { reactive } from 'vue'
  const dataForm = reactive({
    list:[
      { select:false },
      { select:false },
      { select:false },
      { select:false },
    ],
    sleb:0,
    timer:null,
    index:0,
  });
  
  const touchStart = (e) => {
    // console.log(e);
    console.log(e.touches[0].clientX);
    dataForm.sleb = e.touches[0].clientX;
  };
  const touchMove = (e) => {
    // console.log(e);
    // console.log(e.touches[0].clientX);
    clearTimeout(dataForm.timer);
    dataForm.timer = setTimeout(() => {
      // 排它
      dataForm.list.forEach(item => {
        item.select = false;
      })
      const delTax = e.touches[0].clientX - dataForm.sleb;
      if(delTax < -10){
        // 向左滑动
        console.log("向左滑动",delTax);
        dataForm.list[dataForm.index].select = true;
      }else if(delTax > 10){
        // 向右滑动
        console.log("向右滑动",delTax);
        dataForm.list[dataForm.index].select = false;
      }
    },300);
  };
  // 获取索引index
  const touchEnd = (i) => {
    console.log(i);
    dataForm.index = i;
  };
  // 删除
  const handleDel = (i) => {
    console.log("删除",i);
  }
</script>

<style scoped>
      .view_slider{
      display: flex;
      width: 100%;
      height: 100px;
      background-color: pink;
      margin-bottom: 6px;
    }
    .left_slider{
      width: 100%;
      height: 100%;
      background-color:bisque;
      overflow: hidden;
    }
    .left_slider_clone{
      display: inline-block;
      width: 100% !important;
      height: 100% !important;
      /* 看情况给 */
      text-align: left;
    }
    .right_slider{
      width: 20%;
      height: 100%;
      background-color: aqua;
    }
    .hide{
      display: none;
    }
</style>

效果图