滑块验证 vue3 step代码

以下是一个基于 Vue 3 的滑块验证组件示例，其中包括一些用于处理滑块操作的步骤代码：

<template>
  <div class="slider-verify">
    <div class="slider-bg"></div>
    <div class="slider-bar" :style="{ left: barLeft }" @mousedown="onMouseDown"></div>
    <div class="slider-text">{{ sliderText }}</div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  name: 'SliderVerify',
  props: {
    successText: {
      type: String,
      default: '验证成功',
    },
    failText: {
      type: String,
      default: '验证失败，请重试',
    },
    verifyDistance: {
      type: Number,
      default: 200,
    },
  },
  setup(props) {
    const state = reactive({
      isDragging: false,
      barLeft: '0px',
      sliderText: '请按住滑块拖动',
    });

    const onMouseDown = (e) => {
      e.preventDefault();
      state.isDragging = true;

      const startX = e.clientX;

      const onMouseMove = (e) => {
        if (state.isDragging) {
          const deltaX = e.clientX - startX;
          const newLeft = Math.min(Math.max(0, deltaX), props.verifyDistance);
          state.barLeft = `${newLeft}px`;
        }
      };

      const onMouseUp = () => {
        state.isDragging = false;
        if (parseInt(state.barLeft) >= props.verifyDistance) {
          state.sliderText = props.successText;
          // 触发验证成功事件
          emit('success');
        } else {
          state.sliderText = props.failText;
          // 触发验证失败事件
          emit('fail');
        }
        // 清除事件监听器
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
      };

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    };

    return {
      ...toRefs(state),
      onMouseDown,
    };
  },
};
</script>

<style scoped>
.slider-verify {
  position: relative;
  width: 300px;
  height: 50px;
  margin: 20px auto;
}

.slider-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 25px;
}

.slider-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #007aff;
  border-radius: 25px;
  cursor: pointer;
  transition: left 0.2s ease-in-out;
}

.slider-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #333;
}
</style>

在这个示例中，我们使用了 `reactive` 和 `toRefs` 来创建响应式数据，并将 `barLeft` 和 `sliderText` 绑定到了模板中。在 `onMouseDown` 处理函数中，我们通过 `document` 对象监听了 `mousemove` 和 `mouseup` 事件，并在拖动结束后根据拖动距离判断验证是否成功，然后触发相应的事件。最后，我们将 `onMouseDown` 函数暴露出来，以便在模板中调用。