vue 固定按钮滑动隐藏显示

1、源码

<!--
 * @Descripttion: 菜单名称
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2023-03-09 10:40:45
 * @LastEditors: PengShuai
 * @LastEditTime: 2023-03-09 11:16:51
-->
<template>
  <div class="touch-btn">
    <div
      @touchstart="touchStart($event)"
      @touchmove="touchMove($event)"
      @touchend="touchEnd($event)"
      class="btn-box"
      :class="status ? 'left' : 'right'"
    >
      按钮
    </div>
  </div>
</template>

<script>
export default {
  name: 'touch-btn',
  data() {
    return {
      // 滑动状态 判断左滑还是右滑
      status: false,
      // 判断是否触发滑动
      flag: false,
      // 开始位置
      startX: 0,
      // 结束位置
      endX: 0,
    }
  },
  methods: {
    // 触摸屏幕时候触发
    touchStart(e) {
      this.flag = true
      this.startX = e.touches[0].clientX
    },
    // 滑动时触发
    touchMove(e) {
      if (this.flag) {
        const moveX = this.endX + (e.touches[0].clientX - this.startX)
        console.log(moveX)
      }
    },
    // 结束时触发
    touchEnd(e) {
      if (this.flag) {
        this.flag = false
        const moveX = e.changedTouches[0].clientX - this.startX
        if (moveX < 0) {
          //向左滑动
          this.status = true
        } else if (moveX > 0) {
          //向右滑动
          this.status = false
        }
      }
    },
  },
}
</script>
<style lang="less" scoped>
.btn-box {
  border: 1px solid red;
  position: fixed;
  top: 40%;
  padding: 10px 20px;
  transition: all 0.5s;
}
.right {
  right: -60px;
}
.left {
  right: 0px;
}
</style>

2、实例-滑动隐藏显示（默认隐藏）