效果

代码

svg图标

初始图标

<svg t="1705397535958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1492" width="200" height="200"><path d="M535.620267 225.826133l-60.347734 60.347734 225.8432 225.809066-225.8432 225.8432 60.347734 60.347734 256-256L821.794133 512 535.620267 225.826133z m-273.066667 0l-60.347733 60.347734 225.8432 225.809066-225.8432 225.8432 60.347733 60.347734 256-256L548.727467 512 262.5536 225.826133z" p-id="1493"></path></svg>

成功的图标

<svg t="1705397990586" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2463" width="200" height="200"><path d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m260.654545 425.425455l-279.272727 279.272727c-5.585455 5.585455-13.032727 9.309091-21.410909 9.309091-10.24 1.861818-20.48-0.930909-27.927273-8.378182l-175.941818-176.872727a30.906182 30.906182 0 0 1 0-43.752728l14.894546-14.894545c12.101818-12.101818 31.650909-12.101818 43.752727 0l141.498182 141.498182 244.829091-244.829091c12.101818-12.101818 31.650909-12.101818 43.752727 0L772.654545 381.672727c12.101818 12.101818 12.101818 31.650909 0 43.752728z" fill="#65B85D" p-id="2464"></path></svg>

vue组件

<template>
  <div class="slider-container">
    <div
      class="slider-left"
      :style="{
        width: moveX + 'px',
        opacity: state ? '1' : '0.8',
      }"
      v-text="text"
    ></div>
    <div class="slide" :style="{ left: moveX + 'px' }" @mousedown="handleMouseDown">
      <svg-icon :iconClass="state ? 'success' : 'drag'" className="drag" />
    </div>
    <div class="slider-right" style="padding-left: 64px">请按住滑动块，拖到最右</div>
  </div>
</template>

<script>
export default {
  name: 'LoginSlideVerify',

  data() {
    return {
      state: false, // 认证状态
      initX: 0, // 初始值
      moveX: 0,
      text: '',
    };
  },

  mounted() {},

  methods: {
    handleMouseDown(event) {
      if (this.state) return;
      this.initX = event.clientX;
      const that = this;
      document.onmousemove = function (e) {
        if (that.initX === 0) return;
        const curX = e.clientX;
        const moveX = curX - that.initX;
        that.moveX = moveX;
        if (moveX < 0) {
          that.moveX = 0;
        }
        // 认证成功
        const max = 320 - 64;
        if (moveX >= max) {
          that.moveX = max;
          that.initX = 0;
          that.state = true;
          that.text = '验证通过';
        }
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        if (that.moveX < 256) {
          that.initX = 0;
          that.moveX = 0;
        }
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.slider-container {
  user-select: none; // 禁止用户选中
  position: relative;
}
.slider-left {
  position: absolute;
  left: 0;
  top: 0;
  height: 48px;
  line-height: 48px;
  font-size: 13.7143px;
  color: rgb(255, 255, 255);
  font-weight: 600;
  background-color: rgb(43, 186, 111);
}
.slider-right {
  width: 320px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  color: rgb(153, 153, 153);
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
  background-color: rgb(238, 238, 238);
}
.slide {
  width: 64px;
  height: 48px;
  line-height: 48px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 3px;
  border: 1px solid #ccc;
  z-index: 6;
  background-color: #fff;
  cursor: move;
  text-align: center;
  box-sizing: border-box;
  .drag {
    width: 16px;
    height: 16px;
  }
}
</style>