vue-cil划动显示或隐藏删除按钮

vue-cil划动显示或隐藏删除按钮

**

功能描述：

**正常显示左侧功能栏，向左拖动后显示按钮，松手后根据划动距离判断是否显示按钮，过半显示，不过半隐藏。

<template>
    <div>
        <div class="box">
            <div class="box_center" id="pic">
                <div class="box_nrA">

                </div>
                <div class="box_nrB" id="picS">删除</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            position:{//鼠标点击的x和y坐标
                x:'',y:''
            },
            dx:"",//初始左边距
            dy:"",//初始上边距
            xPum:""
        }
    },
     mounted() {
        let moveDiv = document.querySelector("#pic");
        moveDiv.style.left ="0px";
        moveDiv.style.top ="0px";
        moveDiv.addEventListener('touchstart', this.down, { passive: false })
        moveDiv.addEventListener('touchmove', this.move, { passive: false })
        moveDiv.addEventListener('touchend', this.end, { passive: false })
      }
     ,methods:{
        down(){
          let moveDiv = document.querySelector("#pic");
          var touch;
          if(event.touches){
            touch = event.touches[0];
          } else {
            touch = event;
          }
          this.position.x = touch.clientX;
          this.dx = moveDiv.offsetLeft; //初始左边距
        }
        ,move(){
          let moveDiv = document.querySelector("#pic")
          let moveDivnr = document.querySelector("#picS")
          var touch ;
          if(event.touches){
            touch = event.touches[0];
          }else {
            touch = event;
          }
          //组织默认事件，防止body滑动
          event.preventDefault();
          this.nx = touch.clientX - this.position.x;//划动x
          this.xPum = this.dx+this.nx;//初始左边距+划动边距=应移动边距
          //边界判断
            if(this.xPum<=-moveDivnr.offsetWidth){
                this.xPum=-moveDivnr.offsetWidth;
            }else if(this.xPum>=0){
                this.xPum=0;
            }
          moveDiv.style.left = this.xPum+"px";
        }
        ,end(){
            let moveDiv = document.querySelector("#pic");
            let moveDivnr = document.querySelector("#picS");
            if(moveDiv.offsetLeft<=-moveDivnr.offsetWidth/2){//过半显示
                let i=0;
                var interval = setInterval(function(){//徐徐而来
                    i-=0.1;
                    moveDiv.style.left=parseInt(moveDiv.style.left)+i+"px"
                    if(parseInt(moveDiv.style.left)+i<=-moveDivnr.offsetWidth){
                        clearInterval(interval);//全部展示后终止定时器
                    }
                },10)
            }else{//未过半隐藏
                moveDiv.style.left = "0px";
            }
        }
      }
}
</script>
<style>
*{
    margin: 0px;
    padding:0px;
}
.box{
    position: relative;
    width: 300px;
    height: 100px;
    border:1px solid paleturquoise;
    overflow: hidden;
}
.box_center{
    display:flex;
    position: absolute;
    width: 400px;
    height:100px;
    background: red;
}
.box_nrA{
    width: 300px;
    height: 100px;
    background:greenyellow;
}
.box_nrB{
    width: 100px;
    text-align: center;
    height: 100px;
    line-height: 100px;
    color:beige;
}
</style>