滑块验证 vue代码

以下是一个简单的滑块验证组件的 Vue 代码示例：

<template>
  <div class="slider-verify">
    <div class="slider-bar" ref="sliderBar"></div>
    <div class="slider-button" ref="sliderButton" @mousedown="startDrag"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      sliderBarWidth: 0,
      sliderButtonWidth: 0,
      maxDistance: 0,
      success: false,
    };
  },
  mounted() {
    this.sliderBarWidth = this.$refs.sliderBar.clientWidth;
    this.sliderButtonWidth = this.$refs.sliderButton.clientWidth;
    this.maxDistance = this.sliderBarWidth - this.sliderButtonWidth;
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.startX = e.clientX;
      document.addEventListener("mousemove", this.drag);
      document.addEventListener("mouseup", this.stopDrag);
    },
    drag(e) {
      if (this.isDragging) {
        const distance = e.clientX - this.startX;
        const button = this.$refs.sliderButton;
        button.style.transform = `translateX(${distance}px)`;
        if (distance >= this.maxDistance) {
          this.isDragging = false;
          button.style.transform = `translateX(${this.maxDistance}px)`;
          this.success = true;
          this.$emit("success");
        }
      }
    },
    stopDrag() {
      if (!this.success) {
        const button = this.$refs.sliderButton;
        button.style.transform = "translateX(0)";
      }
      document.removeEventListener("mousemove", this.drag);
      document.removeEventListener("mouseup", this.stopDrag);
      this.isDragging = false;
    },
  },
};
</script>

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

.slider-bar {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 4px;
  background-color: #ddd;
}

.slider-button {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.3s ease-out;
}
</style>

在这个示例中，我们创建了一个名为 `SliderVerify` 的组件，用于实现滑块验证功能。组件包含一个滑块条和一个滑块按钮，当用户拖动按钮到滑块条的最右侧时，触发验证成功的事件。

组件的主要逻辑在 `startDrag`、`drag` 和 `stopDrag` 方法中实现。`startDrag` 方法在用户按下鼠标左键时被调用，记录鼠标的起始位置和当前正在拖动滑块按钮的状态。`drag` 方法在用户拖动滑块按钮时被调用，根据鼠标的水平位移计算出滑块按钮应该移动的距离，并更新按钮的样式。如果滑块按钮移动到了滑块条的最右侧，触发验证成功的事件。`stopDrag` 方法在用户松开鼠标左键时被调用，根据验证是否成功来恢复滑块按钮的位置。

最后，我们在组件的模板中使用 `ref` 属性来获取滑块条和滑块按钮的 DOM 元素，并通过 CSS 样式来设置它们的外观和布局。在组件中使用 `this.$emit` 方法来触发验证成功的事件，供父组件监听并处理。