vue滑块验证效果（pc、h5都可用）_滑块验证码,图片滑块验证码(兼容pc和h5)-CSDN博客

本文链接：https://blog.csdn.net/xiaofang_z/article/details/127101930

本文档展示了如何在Web端实现一个滑块验证组件，包括H5和Vue.js的应用。组件包含了鼠标和触摸事件处理，实现了滑动验证成功和失败的回调功能，同时提供了不同的状态样式。该组件可用于网页的弹窗或其他需要滑动验证的场景。

摘要由CSDN通过智能技术生成

web端效果

我这里需求是要在弹框里，实际可根据其他场景也可应用

h5效果

html

<template>
  <div>
      <Slide
        v-if="showPhone"
        @success="handleSuccess"
        @failed="handleError">
      </Slide>
  </div>
</template>

<script>
//引入组件时，注意路径
import Slide from "@/views/modules/slide.vue";
export default {
  data() {
    return {
       showPhone:false 
    },
  },
   components: {
    Slide
  },
 methods: {
     // 滑块成功
    handleSuccess() {
      this.slide_vale = true;
    },
    // 滑块失败
    handleError() {
      this.slide_vale = false;
    }
   }
}
</script>

slide组件

<template>
  <div class="silder-range" :class="rangeStatus ? 'success' : ''">
    <i
      v-if="!isMobile"
      @mousedown="rangeMove"
      :class="
        rangeStatus
          ? 'ivu-icon ivu-icon-ios-checkmark-circle'
          : 'ivu-icon ivu-icon-ios-arrow-dropright'
      "
    ></i>
    <i
      v-if="isMobile"
      @touchstart="rangeMoveMobile"
      :class="
        rangeStatus
          ? 'ivu-icon ivu-icon-ios-checkmark-circle'
          : 'ivu-icon ivu-icon-ios-arrow-dropright'
      "
    ></i>
    {{ rangeStatus ? successText : startText }}
  </div>
</template>
<script>
export default {
  props: {
    //成功图标
    // successIcon: {
    //   type: String,
    //   default: "ios-checkmark-circle",
    // },
    //成功文字
    successText: {
      type: String,
      default: "验证成功",
    },
    //开始的图标
    // startIcon: {
    //   type: String,
    //   default: "ios-arrow-dropright",
    // },
    //开始的文字
    startText: {
      type: String,
      default: "拖动滑块到最右侧",
    },
  },
  name: "SilderVerify",
  data() {
    return {
      rangeStatus: "",
    };
  },
  methods: {
    rangeMove(e) {
      let ele = e.target;
      let startX = e.clientX;
      let eleWidth = ele.offsetWidth;
      let parentWidth = ele.parentElement.offsetWidth;
      let MaxX = parentWidth - eleWidth;
      if (this.rangeStatus) {
        //不运行
        return false;
      }
      document.onmousemove = (e) => {
        let endX = e.clientX;
        this.disX = endX - startX;
        if (this.disX <= 0) {
          this.disX = 0;
        }
        if (this.disX >= MaxX - eleWidth) {
          //减去滑块的宽度,体验效果更好
          this.disX = MaxX;
        }
        ele.style.transition = ".1s all";
        ele.style.transform = "translateX(" + this.disX + "px)";
        e.preventDefault();
      };
      document.onmouseup = () => {
        if (this.disX !== MaxX) {
          ele.style.transition = ".5s all";
          ele.style.transform = "translateX(0)";

          this.$emit("failed", this.rangeStatus);
        } else {
          this.rangeStatus = true;

          this.$emit("success", this.rangeStatus);
        }
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    rangeMoveMobile(el) {
      let e = el.touches[0];
      let ele = e.target;
      let startX = e.clientX;
      let eleWidth = ele.offsetWidth;
      let parentWidth = ele.parentElement.offsetWidth;
      let MaxX = parentWidth - eleWidth;
      if (this.rangeStatus) {
        //不运行
        return false;
      }
      document.ontouchmove = (el) => {
        let e = el.touches[0];
        let endX = e.clientX;
        this.disX = endX - startX;
        if (this.disX <= 0) {
          this.disX = 0;
        }
        if (this.disX >= MaxX - eleWidth) {
          //减去滑块的宽度,体验效果更好
          this.disX = MaxX;
        }
        ele.style.transition = ".1s all";
        ele.style.transform = "translateX(" + this.disX + "px)";
      };
      document.ontouchend = () => {
        if (this.disX !== MaxX) {
          ele.style.transition = ".5s all";
          ele.style.transform = "translateX(0)";

          this.$emit("failed", this.rangeStatus);
        } else {
          this.rangeStatus = true;

          this.$emit("success", this.rangeStatus);
        }
        document.ontouchmove = null;
        document.ontouchend = null;
      };
    },
  },
};
</script>
<style scoped>
.silder-range {
  background-color: #e3e4e6;
  position: relative;
  transition: 1s all;
  user-select: none;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px; /*no*/
}
.silder-range i {
  position: absolute;
  left: 0;
  width: 60px; /*no*/
  height: 100%;
  color: #919191;
  background-color: #fff;
  border: 1px solid #bbb;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
}
.silder-range.success {
  background-color: #7ac23c;
  color: #fff;
}
.silder-range.success i {
  color: #7ac23c;
}
</style>