vue2滑块校验手动实现，定义滑块和滑块背景图，拖动校验

vue2可以滑块拖动校验自己写不使用插件，可以自定义两张图片，滑块和滑块背景图，可以拖动验证

引用chatgpt内容作答：
下面是一个简单的 Vue 2 代码示例，演示了如何创建一个滑块拖动验证功能，使用自定义的滑块和背景图。

首先，确保你已经安装了 Vue 2，并且在项目中创建了一个 Vue 实例。然后可以按照以下方式编写代码：

在你的 Vue 组件中，创建一个滑块验证区域。

<template>
  <div class="slider-verification">
    <div class="slider-background" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
      <div class="slider" :style="{ left: sliderPosition + 'px' }" @mousedown="startDrag" @mousemove="handleDrag" @mouseup="endDrag">
        <img class="slider-icon" :src="sliderImage" alt="Slider">
      </div>
    </div>
    <div v-if="isVerified" class="success-message">验证成功！</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderPosition: 0,
      isDragging: false,
      isVerified: false,
      backgroundImage: 'url(path_to_background_image.jpg)',
      sliderImage: 'path_to_slider_image.png',
      verificationThreshold: 80, // Adjust this threshold according to your needs
    };
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      const offsetX = event.clientX - this.$refs.slider.getBoundingClientRect().left;
      this.sliderPosition = offsetX;
    },
    handleDrag(event) {
      if (this.isDragging) {
        const offsetX = event.clientX - this.$refs.slider.getBoundingClientRect().left;
        this.sliderPosition = Math.max(0, Math.min(offsetX, this.$refs.background.offsetWidth));
      }
    },
    endDrag() {
      if (this.isDragging) {
        this.isDragging = false;
        if (this.sliderPosition >= this.verificationThreshold) {
          this.isVerified = true;
        } else {
          this.sliderPosition = 0;
        }
      }
    },
  },
};
</script>

<style>
.slider-verification {
  position: relative;
  width: 300px;
  height: 150px;
}

.slider-background {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  cursor: pointer;
}

.slider-icon {
  position: absolute;
  top: 50%;
  left: -15px;
  transform: translate(0, -50%);
}
.success-message {
  margin-top: 10px;
  text-align: center;
  color: green;
}
</style>

在这个示例中，我们创建了一个滑块验证区域，其中包含了滑块和背景图。滑块可以通过鼠标拖动，当滑块位置超过验证阈值时，会显示验证成功的消息。你需要根据你的实际需求，调整背景图片路径、滑块图片路径以及验证阈值。

这只是一个简单的示例，实际应用中可能需要更多的功能和优化。希望这个示例能帮助你开始创建滑块拖动验证功能！

百度找一下官网文档，试试这三个插件:VeeValidate，Vuelidate，vue-formulate

首先，需要在Vue项目中引入两张自定义图片，并添加样式。
具体实现步骤如下：

在组件中定义需要用到的data数据，包括：滑块位置、滑块宽度、滑块背景图的地址、滑块的地址等信息。
在HTML模板中，使用<div>标签包裹两张图片，为其设置样式和绑定事件。
实现滑动验证功能，通过监听鼠标移动的事件，动态计算出滑块当前的位置，并根据位置的变化，设置相关的样式。
添加提交按钮，当滑块验证成功后，才能够提交表单。

下面是完整代码示例：

<template>
  <div class="verify-container">
    <div class="verify-img-wrap">
      <img :src="bgImg" alt="" class="verify-img-bg">
      <img :src="sliderImg" alt="" class="verify-img-slider" @mousedown="onMouseDown">
    </div>
    <button :disabled="!isVerified" @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderPos: 0,
      sliderWidth: 40,
      bgImg: 'path/to/bgImg',
      sliderImg: 'path/to/sliderImg',
      startX: 0,
      isMousedown: false,
      isVerified: false,
    };
  },
  methods: {
    onMouseDown(event) {
      this.startX = event.clientX;
      this.isMousedown = true;
      this.sliderWidth = 40;
      this.sliderPos = 0;
    },
    onMouseMove(event) {
      if (!this.isMousedown) return;
      const offset = event.clientX - this.startX;
      const maxOffset = 220;
      if (offset >= maxOffset) {
        this.sliderPos = maxOffset;
        this.sliderWidth = 0;
        this.isVerified = true;
        this.isMousedown = false;
      } else {
        this.sliderPos = offset;
        this.sliderWidth = 40 - offset / 5;
      }
    },
    onMouseUp() {
      if (!this.isMousedown) return;
      this.isMousedown = false;
      this.sliderPos = 0;
      this.sliderWidth = 40;
    },
    submitForm() {
      if (this.isVerified) {
        console.log('表单提交成功');
      } else {
        console.log('请先进行验证');
      }
    },
  },
  mounted() {
    document.addEventListener('mousemove', this.onMouseMove);
    document.addEventListener('mouseup', this.onMouseUp);
  },
  destroyed() {
    document.removeEventListener('mousemove', this.onMouseMove);
    document.removeEventListener('mouseup', this.onMouseUp);
  },
};
</script>

<style scoped>
.verify-container {
  position: relative;
  width: 240px;
  height: 140px;
}

.verify-img-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 240px;
  height: 140px;
  overflow: hidden;
}

.verify-img-bg {
  width: 100%;
  height: 100%;
}

.verify-img-slider {
  position: absolute;
  top: 25px;
  left: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 2;
  transition: all ease 0.3s;
}

.verify-img-slider:hover {
  box-shadow: 0px 0px 10px #ccc;
}

button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 80px;
  height: 30px;
  border: none;
  border-radius: 5px;
  background-color: #007fff;
  color: #fff;
  cursor: pointer;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>

上述代码中，通过监听鼠标的mousedown、mousemove、mouseup事件，动态计算滑块的位置和宽度，并根据是否验证成功来禁用提交按钮。

引用chatgpt作答

下面是一个使用 Vue.js 2 实现滑块校验的示例：

首先，你需要定义一个滑块组件，其中包含滑块和滑块背景图。在模板中，你可以使用 @mousedown、@mousemove 和 @mouseup 监听滑块的鼠标事件，从而实现滑块的拖动。在 data 中，你可以定义一个变量 sliderPosition 来记录滑块的位置。然后，你可以在滑块拖动结束时触发一个校验方法，根据滑块的位置进行校验。

<template>
  <div class="slider-container">
    <div class="slider-background"></div>
    <div class="slider" :style="{ left: sliderPosition + 'px' }" @mousedown="startDrag" @mousemove="drag" @mouseup="endDrag"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderPosition: 0,
      isDragging: false
    }
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
    },
    drag(event) {
      if (this.isDragging) {
        const container = event.target.parentNode;
        const containerRect = container.getBoundingClientRect();
        const position = event.clientX - containerRect.left;
        
        // 校验滑块位置是否超出背景图边界
        if (position >= 0 && position <= containerRect.width) {
          this.sliderPosition = position;
        }
      }
    },
    endDrag(event) {
      if (this.isDragging) {
        this.isDragging = false;
        this.validateSlider();
      }
    },
    validateSlider() {
      // 根据滑块位置进行校验
      // ...
    }
  }
}
</script>

<style>
.slider-container {
  position: relative;
  width: 200px;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.slider-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('path/to/slider-background-image.png');
  background-repeat: no-repeat;
  background-position: center;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #007bff;
  cursor: pointer;
}
</style>

代码说明：使用 @mousedown、@mousemove 和 @mouseup 监听滑块的鼠标事件，并在 drag 方法中根据鼠标位置计算滑块的位置，然后根据条件判断将滑块位置更新为当前位置。在 endDrag 方法中，我们结束拖动并触发校验方法。你可以在 validateSlider 方法中根据滑块的位置进行校验操作。

这不很简单么，你弄个模态框，背景图和滑块分别用两个div。检测滑块位置是否到了正确的区间


<template>
  <div class="slider-container">
    <div
      class="slider-background"
      :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"
    >
      <div
        class="slider"
        :style="{ left: sliderPosition + 'px', backgroundImage: 'url(' + sliderImage + ')' }"
        @mousedown="startDrag"
        @mousemove="drag"
        @mouseup="endDrag"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderPosition: 0,
      isDragging: false,
      sliderImage: 'path/to/slider-image.png',
      backgroundImage: 'path/to/background-image.png'
    };
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.drag(event);
    },
    drag(event) {
      if (this.isDragging) {
        const containerRect = this.$el.getBoundingClientRect();
        const newPosition = event.clientX - containerRect.left;

        if (newPosition >= 0 && newPosition <= containerRect.width) {
          this.sliderPosition = newPosition;
        }
      }
    },
    endDrag() {
      this.isDragging = false;
      // 在这里可以添加验证逻辑，根据滑块位置进行校验
      // 示例：if (this.sliderPosition >= VALID_POSITION) { 验证通过 }
    }
  }
};
</script>

<style>
.slider-container {
  width: 300px;
  height: 150px;
  position: relative;
}

.slider-background {
  width: 100%;
  height: 100%;
  background-size: cover;
}

.slider {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background-size: cover;
}
</style>

首先，您需要准备两张图片，一张是滑块的图片，另一张是滑块背景的图片。您可以将这些图片放置在项目的适当位置，并在组件中引用它们。

接下来，您可以使用Vue 2的模板创建一个简单的滑块拖动验证组件。以下是一个示例：

<template>
  <div class="slider-container">
    <div class="slider-background" :style="{ backgroundImage: `url(${backgroundImageUrl})` }"></div>
    <div class="slider" :style="{ backgroundImage: `url(${sliderImageUrl})`, left: `${sliderPosition}px` }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderPosition: 0,
      minPosition: 0,
      maxPosition: 0,
    };
  },
  props: {
    minValue: {
      type: Number,
      default: 0,
    },
    maxValue: {
      type: Number,
      default: 100,
    },
    value: {
      type: Number,
      default: 0,
    },
    backgroundImageUrl: {
      type: String,
      default: '',
    },
    sliderImageUrl: {
      type: String,
      default: '',
    },
  },
  watch: {
    value(newValue) {
      this.sliderPosition = newValue;
    },
  },
};
</script>

<style scoped>
.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.slider-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.slider {
  position: absolute;
  top: 50%;
  left: ${this.sliderPosition}px; /* 使用计算属性 */
  width: 50px; /* 根据需要调整滑块大小 */
  height: 50px; /* 根据需要调整滑块大小 */
  background-size: cover;
}
</style>

引用ChatGPT

在 Vue 2 项目中，创建一个组件，例如 SliderVerification：

<template>
  <div class="slider-verification">
    <div class="background" :style="backgroundStyle"></div>
    <div class="slider" :style="sliderStyle" :mousedown="onMouseDown"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      offsetX: 0,
    };
  },
  computed: {
    backgroundStyle() {
      return `background-image: url('path/to/background-image.jpg');`;
    },
    sliderStyle() {
      return `background-image: url('path/to/slider-image.png'); left: ${this.offsetX}px;`;
    },
  },
  methods: {
    onMouseDown(event) {
      event.preventDefault();
      this.isDragging = true;
      this.startX = event.clientX;
    },
    onMouseMove(event) {
      if (this.isDragging) {
        const moveX = event.clientX - this.startX;
        this.offsetX = Math.max(0, Math.min(moveX, 200)); // 设置滑块最大可拖动距离为 200px
      }
    },
    onMouseUp(event) {
      if (this.isDragging) {
        this.isDragging = false;

        if (this.offsetX >= 200) {
          // 拖动校验成功，触发相应操作
          // 在这里可以添加你的逻辑代码
          console.log("Verification passed!");
        } else {
          // 校验失败时，重置滑块位置
          this.offsetX = 0;
        }
      }
    },
  },
  mounted() {
    document.addEventListener("mousemove", this.onMouseMove);
    document.addEventListener("mouseup", this.onMouseUp);
  },
  beforeDestroy() {
    document.removeEventListener("mousemove", this.onMouseMove);
    document.removeEventListener("mouseup", this.onMouseUp);
  },
};
</script>

<style scoped>
.slider-verification {
  position: relative;
  width: 300px; /* 设置组件容器宽度 */
  height: 80px; /* 设置组件容器高度 */
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

.slider {
  position: absolute;
  top: 0;
  width: 80px; /* 设置滑块宽度 */
  height: 80px; /* 设置滑块高度 */
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  user-select: none;
  pointer-events: none;
}
</style>

将组件 SliderVerification 引入到你的页面中，并使用它：

<template>
  <div>
    <h1>滑块校验示例</h1>
    <SliderVerification></SliderVerification>
  </div>
</template>

<script>
import SliderVerification from "./components/SliderVerification.vue";

export default {
  components: {
    SliderVerification,
  },
};
</script>

在上述示例中，通过监听鼠标事件实现了滑块的拖动验证。当滑块的拖动距离达到一定的阈值（在示例中设置为 200px）时，即可认为验证成功，你可以在 onMouseUp 方法中对验证通过时的逻辑进行处理。

请确保将 path/to/background-image.jpg 和 path/to/slider-image.png 更换为你自己的图片路径。另外，你可以根据需要调整组件的宽度、高度和样式。

vue3实现滑块验证具体实现代码_️刘团团的博客-CSDN博客 / left等于鼠标的位置pageX减去data.btnRef.offsetLeft再减去data.btnLeft（计算出的距离）// 计算出鼠标按下的位置 pageX 减去按钮距离窗口的位置等于鼠标点击的位置距离按钮的边距。console.log("验证通过");拖动滑块完成验证// 判断滑动图片时是否超出范围。// data1随机位置。//滑动的时候只要求鼠标没有松开。

https://blog.csdn.net/qq_55681529/article/details/130944420?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169156790716800226533328%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=169156790716800226533328&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~times_rank-2-130944420-null-null.142^v92^chatsearchT3_1&utm_term=vue%E5%AE%9E%E7%8E%B0%E6%BB%91%E5%9D%97%E6%8B%96%E6%8B%BD%E6%A0%A1%E9%AA%8C&spm=1018.2226.3001.4187

或者开源项目

AJ-Captcha: 行为验证码(滑动拼图、点选文字)，前后端(java)交互，包含vue/h5/Android/IOS/flutter/uni-app/react/php/go/微信小程序的源码和实现

https://gitee.com/anji-plus/captcha

【以下回答由 GPT 生成】

首先，我们可以创建一个 Vue 组件来实现滑块校验功能。

在 Vue 组件中，可以定义两个 data 属性，一个用于保存滑块的位置，一个用于保存滑块是否处于拖动状态的标志位。

<template>
  <div>
    <div 
      class="slider-background" 
      :style="{ backgroundImage: `url(${backgroundImage})` }"
      @mousedown="onMouseDown"
    >
      <div 
        class="slider" 
        :style="{ left: sliderPosition + 'px', backgroundImage: `url(${sliderImage})` }"
        v-show="!isSliding"
      ></div>
      <div 
        class="slider sliding" 
        :style="{ left: sliderPosition + 'px', backgroundImage: `url(${sliderImage})` }"
        v-show="isSliding"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderPosition: 0,
      isSliding: false,
      backgroundImage: './path/to/background-image.jpg',
      sliderImage: './path/to/slider-image.jpg'
    };
  },
  methods: {
    onMouseDown(event) {
      this.isSliding = true;
      document.addEventListener('mousemove', this.onMouseMove);
      document.addEventListener('mouseup', this.onMouseUp);
    },
    onMouseMove(event) {
      // 计算滑块位置
      // 可以通过 event.clientX 来获取鼠标当前的横坐标
      // 根据具体情况计算滑块位置的算法需要根据实际需求自定义
      this.sliderPosition = event.clientX - event.target.getBoundingClientRect().left;
    },
    onMouseUp(event) {
      document.removeEventListener('mousemove', this.onMouseMove);
      document.removeEventListener('mouseup', this.onMouseUp);
      this.isSliding = false;
      // 验证滑块位置是否正确
      // 根据具体情况编写滑块校验的逻辑
      if (this.sliderPosition >= /* 校验条件 */) {
        // 滑块校验通过
        // 执行校验通过后的操作，比如发送请求、跳转页面等
      } else {
        // 校验失败
        // 执行校验失败后的操作，比如显示错误提示等
      }
    }
  }
};
</script>

在 CSS 样式中，需要设置滑块和滑块背景图的样式，使其显示正常。可以根据实际需求进行调整。

.slider-background {
  position: relative;
  width: 300px;
  height: 50px;
  background-size: cover;
  background-repeat: no-repeat;
}

.slider {
  position: absolute;
  top: 0;
  width: 100px;
  height: 50px;
  background-size: cover;
  background-repeat: no-repeat;
}

.slider.sliding {
  cursor: grabbing;
}

以上代码实现了一个简单的滑块校验功能，可以根据具体需求进行定制。其中，滑块的位置和校验条件可以根据实际情况自定义。如果不清楚如何实现滑块的位置计算和校验逻辑，可以进一步提供详细需求和具体要求，我将尽力提供更准确的解决方案。

【相关推荐】

这个问题的回答你可以参考下: https://ask.csdn.net/questions/7539908
这篇博客你也可以参考下：Vue2 动态路由、解决跳页面跳转后新页面没有位于顶部的问题、决编程式路由往同一地址跳转时会报错的情况
您还可以看一下尹涛老师的VUE实战项目之喵喵电影课程中的第004集搭建脚手架与远程仓库小节, 巩固相关知识点
除此之外, 这篇博客: vue2实现海康威视根据海康插件进行监控实时预览和回放功能，全套代码，开箱即用。中的 一、插件下载与安装 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

vue滑块校验

<template>
  <div class="drag" ref="dragDiv">
    <div class="drag_bg"></div>
    <div class="drag_text">{{confirmWords}}</div>
    <div ref="moveDiv" @mousedown="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}"
      class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        beginClientX: 0,
        /* 距离屏幕左端距离 */
        mouseMoveStata: false,
        /* 触发拖动状态  判断 */
        maxwidth: '',
        /* 拖动最大宽度，依据滑块宽度算出来的 */
        confirmWords: '拖动滑块验证',
        /* 滑块文字 */
        confirmSuccess: false /* 验证成功判断 */
      }
    },
    methods: {
      mousedownFn: function (e) {
        if (!this.confirmSuccess) {
          e.preventDefault && e.preventDefault() // 阻止文字选中等 浏览器默认事件
          this.mouseMoveStata = true
          this.beginClientX = e.clientX
        }
      }, // mousedoen 事件
      successFunction() {
        this.confirmSuccess = true
        this.confirmWords = '验证通过'
        if (window.addEventListener) {
          document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)
          document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)
        } else {
          document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {})
        }
        document.getElementsByClassName('drag_text')[0].style.color = '#fff'
        document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px'
        document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px'
      }, // 验证成功函数
      mouseMoveFn(e) {
        if (this.mouseMoveStata) {
          let width = e.clientX - this.beginClientX
          if (width > 0 && width <= this.maxwidth) {
            document.getElementsByClassName('handler')[0].style.left = width + 'px'
            document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'
          } else if (width > this.maxwidth) {
            this.successFunction()
          }
        }
      }, // mousemove事件
      moseUpFn(e) {
        this.mouseMoveStata = false
        var width = e.clientX - this.beginClientX
        if (width < this.maxwidth) {
          document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
          document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
        }
      } // mouseup事件
    },
    mounted() {
      this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth
      document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)
      document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)
    }
  }
 
</script>
 
<style scoped>
  .drag {
    position: relative;
    background-color: #e8e8e8;
    width: 30%;
    height: 34px;
    line-height: 34px;
    text-align: center;
  }
 
  .handler {
    width: 40px;
    height: 32px;
    border: 1px solid #ccc;
    cursor: move;
  }
 
  .handler_bg {
    background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==') no-repeat center;
  }
 
  .handler_ok_bg {
    background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==') no-repeat center;
  }
 
  .drag_bg {
    background-color: #7ac23c;
    height: 34px;
    width: 0px;
  }
 
  .drag_text {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
  }
 
</style>

我理解的是从左边拖动到右边的滑块吧

<template>
  <div class="slider-container">
    <div class="slider-bg" :style="{ backgroundImage: `url(${bgImage})` }">
      <div
        class="slider"
        :style="{ left: `${sliderLeft}px`, backgroundImage: `url(${sliderImage})` }"
        @mousedown="handleMouseDown"
      ></div>
    </div>
    <div v-if="isVerified">验证成功！</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderLeft: 0,
      isMouseDown: false,
      isVerified: false,
      startX: 0,
      bgImage: 'background.jpg', // 滑块背景图
      sliderImage: 'slider.jpg', // 滑块图片
    };
  },
  methods: {
    handleMouseDown(event) {
      this.isMouseDown = true;
      this.startX = event.clientX;
      document.addEventListener('mousemove', this.handleMouseMove);
      document.addEventListener('mouseup', this.handleMouseUp);
    },
    handleMouseMove(event) {
      if (this.isMouseDown) {
        const diffX = event.clientX - this.startX;
        this.sliderLeft = Math.max(0, Math.min(diffX, 200)); // 可拖动的最大距离为200px

        if (this.sliderLeft === 200) {
          this.isVerified = true;
          document.removeEventListener('mousemove', this.handleMouseMove);
          document.removeEventListener('mouseup', this.handleMouseUp);
        }
      }
    },
    handleMouseUp() {
      if (!this.isVerified) {
        this.sliderLeft = 0;
      }
      this.isMouseDown = false;
      document.removeEventListener('mousemove', this.handleMouseMove);
      document.removeEventListener('mouseup', this.handleMouseUp);
    },
  },
};
</script>

<style>
.slider-container {
  position: relative;
  width: 300px;
  height: 100px;
}

.slider-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
}

.slider {
  position: absolute;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-size: cover;
}
</style>

在Vue 2中实现滑块拖动校验并自定义滑块和滑块背景图可以通过以下步骤来实现：

1.创建Vue组件：

首先，你需要创建一个Vue组件来承载滑块拖动校验的功能。你可以在组件的模板中添加两张图片，一个作为滑块，另一个作为滑块背景图。

2.实现滑块拖动：

在Vue组件的JavaScript部分，你可以使用Vue的数据绑定和事件监听来实现滑块的拖动功能。通过计算鼠标点击和拖动的距离，你可以移动滑块的位置，并根据位置来判断是否通过校验。

下面是一个简化的示例代码，供你参考：

<template>
  <div class="slider-container">
    <div class="slider-background">
      <!-- 滑块背景图 -->
      <img src="background-image.jpg" alt="Background" />
    </div>
    <div
      class="slider"
      :style="{ left: sliderPosition + 'px' }"
      @mousedown="startDragging"
      @mousemove="dragging"
      @mouseup="endDragging"
    >
      <!-- 滑块图像 -->
      <img src="slider-image.png" alt="Slider" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      sliderPosition: 0,
    };
  },
  methods: {
    startDragging(event) {
      this.isDragging = true;
      this.startX = event.clientX - this.sliderPosition;
    },
    dragging(event) {
      if (this.isDragging) {
        const offsetX = event.clientX - this.startX;
        this.sliderPosition = Math.min(
          Math.max(0, offsetX),
          /* 设置滑块背景图的宽度 - 滑块图像的宽度 */
        );
      }
    },
    endDragging() {
      this.isDragging = false;
      // 在这里根据滑块位置判断是否通过校验
      if (this.sliderPosition >= /* 校验的阈值 */) {
        // 通过校验
      } else {
        // 校验失败，重置滑块位置
        this.sliderPosition = 0;
      }
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需求自行调整 */
.slider-container {
  position: relative;
  width: /* 宽度 */;
  height: /* 高度 */;
}
.slider-background {
  /* 滑块背景图的样式 */
}
.slider {
  position: absolute;
  top: 0;
  transition: left 0.3s ease;
  cursor: pointer;
  /* 滑块图像的样式 */
}
</style>

在这个示例中，你需要替换 background-image.jpg 和 slider-image.png 为你自己的图片路径。另外，你还需要根据实际情况设置滑块的校验阈值和滑块背景图的宽度。

vue2滑块校验实现代码，可以参考资料：
Vue实现图形滑动验证：https://blog.csdn.net/mi_ni123/article/details/127440983
vue页面中实现滑块验证:https://www.cnblogs.com/Life-QX/p/17192430.html
vue实现移动滑块验证:https://www.yii666.com/blog/279673.html

这个找现成的集成进去就可以了

两个DIV，通过坐标来判断