<template>
  <div class="slider-captcha">
    <div class="slider-bg"></div>
    <div class="slider-icon" :style="{ left: x + 'px' }" @mousedown="onDragStart"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        x: 0, // 滑块的x坐标
        startX: 0, // 鼠标按下时的x坐标
        isDragging: false // 是否正在拖动滑块
      }
    },
    methods: {
      onDragStart(e) {
        this.startX = e.clientX;
        this.isDragging = true;
        document.addEventListener('mousemove', this.onDragging);
        document.addEventListener('mouseup', this.onDragEnd);
      },
      onDragging(e) {
        if (this.isDragging) {
          const offsetX = e.clientX - this.startX;
          this.x = Math.max(0, Math.min(200, offsetX));
        }
      },
      onDragEnd() {
        if (this.isDragging) {
          this.isDragging = false;
          document.removeEventListener('mousemove', this.onDragging);
          document.removeEventListener('mouseup', this.onDragEnd);
        }
      }
    }
  }
</script>

<style scoped>
  .slider-captcha {
    position: relative;
    width: 200px;
    height: 50px;
    border: 1px solid #ccc;
    overflow: hidden;
  }

  .slider-bg {
    width: 200px;
    height: 50px;
    background-color: #f0f0f0;
  }

  .slider-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: #3498db;
    cursor: move;
  }
</style>
