安装插件

npm install --save vue-monoplasty-slide-verify

在main.js中引入

import SlideVerify from 'vue-monoplasty-slide-verify'
Vue.use(SlideVerify)

封装组件

<template>
  <slide-verify
    :l="42"
    :r="10"
    :w="310"
    :h="155"
    :imgs="picArray"
    :show="false"
    slider-text="向右滑动完成验证"
    ref="slideverify"
    @success="onSuccess"
    @fail="onFail"
    @refresh="onRefresh"
  ></slide-verify>
</template>

<script>
export default {
  name: "SliderVerify",
  data() {
    return {
      // 在data中引入`assets`中的图片可以通过`require`的方式来引入
      picArray: [
        require("@/assets/verify/1.jpg"),
        require("@/assets/verify/2.jpg"),
        require("@/assets/verify/3.jpg"),
        require("@/assets/verify/4.jpg"),
        require("@/assets/verify/5.jpg"),
        require("@/assets/verify/6.jpg"),
        require("@/assets/verify/7.jpg"),
        require("@/assets/verify/8.jpg")
      ]
    }
  },
  methods: {
    onSuccess() { // 往父级传递验证通过的函数
      this.$emit("success")
    },
    onReset() { // 重置图片验证组件
      this.$refs.slideverify.reset()
    },
    onFail() {},
    onRefresh() {}
  }
}
</script>

在页面中引入

<template>
  <div class="slideverify" @mouseleave="hideSlide">
    <SlideVerify ref="slideblock" @success="sendSmsCode" />
  </div>
</template>
<script>
import SlideVerify from '../components/SliderVerify/index.vue' // 引入

export default {
  name: 'Redister',
  components: {
    SlideVerify // 注册组件
  },
  data() {
    return {
      isShowSlide: false
    }
  },
  methods: {
    hideSlide() {
      setTimeout(() => {
        this.isShowSlide = false
      }, 500)
    },
    sendSmsCode() {
      // 此处的处理是：图片验证通过后，发送短信验证码，这个要根据具体情况单独处理
      setTimeout(() => {
        console.log('图片验证通过')
        // this.$api
        //   .getSendForgetSmsCode({
        //     mobile: this.form.account
        //   })
        //   .then((res) => {
        //     this.isShowSlide = false
        //     if (res.data.success) {
        //       this.timeCountDown()
        //       this.$message.success('短信验证码发送成功')
        //     } else {
        //       this.$message.error(res.data)
        //     }
        //   })
        //   .catch((err) => {
        //     console.log(err)
        //   })
      }, 500)
    }
  }
}
</script>

页面效果

1633769678(1).jpg