时间有限直接上代码

// slider.vue
<template>
  <div>
    <div class="rect" ref="rect">
      <div :class="['slide', isRight ? 'slide-right' : '']" ref="slide">
        <a-icon v-show="!isRight" type="right" />
        <a-icon v-show="isRight" type="check" />
      </div>
      <span v-show="!isRight">向右滑动完成验证</span>
      <span v-show="isRight">验证成功!</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isRight: false
    };
  },
  mounted() {
    this.sliderReset();
    // 挂载窗口大小变化事件
    window.onresize = this.sliderReset;
  },
  methods: {
    // 滑块事件定义
    sliderReset() {
      let oSlide = this.$refs.slide;
      let oRect = this.$refs.rect;
      let left = 0;
      let slideWidth = oSlide.offsetWidth;
      let rectWidth = oRect.offsetWidth;
      oSlide.onmousedown = e => {
        let initX = e.clientX; //鼠标按下时X值
        document.onmousemove = e => {
          //   解决边框问题
          oRect.style.borderLeft = "1px solid #dddddd";
          let moveX = e.clientX;
          left = moveX - initX;
          if (left < 0) {
            left = 0;
          }
          if (left > rectWidth - slideWidth - 52) {
            left = rectWidth - slideWidth;
          }

          left = Math.max(left, 0);
          left = Math.min(left, rectWidth - slideWidth);
          oSlide.style.left = left + "px";
          if (left >= rectWidth - slideWidth - 52) {
            this.isRight = true;
            this.$emit("goCheck");
            oSlide.onmousedown = null;
          }
        };
      };
      document.onmouseup = function() {
        document.onmousemove = null; //清除移动事件
        if (left < rectWidth - slideWidth) {
          oSlide.style.left = 0;
          oRect.style.borderLeft = "0 none";
        }
      };
    }
  }
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.rect {
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  user-select: none;
  border: 1px solid #dddddd;
  border-left: 0 none;
}
.slide {
  position: absolute;
  top: -1px;
  left: 0px;
  width: 45px;
  height: 40px;
  box-sizing: border-box; /*css3怪异盒模型，不云计算边框像素*/
  background-color: white;
  border: 1px solid #dddddd;
  cursor: pointer;
  transition: all 0.2s;
}

.slide-right {
  background: @primary-color;
  color: #fff;
}
</style>

📦 前端资源合集 | 持续更新

🟢 前端0到1【持续更新】→ https://pan.quark.cn/s/5df55ccff7c4

🔵 前端进阶【持续更新】→ https://pan.quark.cn/s/2dec1c87b3ec

🟣 前端2026最新【持续更新】→ https://pan.quark.cn/s/77c8fa94161c

🔴 AI最新学习资料 → https://pan.baidu.com/s/1P9X2Qk_Fby3rFNVGw_WKow?pwd=46XG 提取码：46XG

觉得有用就点个赞+收藏，关注我持续分享前端干货 💡