前端滑块验证码

 npm i -S zx-verify

新建文件 vabVerify.js

import VabVerify from 'zx-verify'
import 'zx-verify/dist/zx-verify.css'

export default VabVerify

 页面模板

<template>
  <div class="verify-container">
    <vab-verify
      ref="slideDiv"
      :w="350"
      :slider-text="text"
      :h="175"
      @success="handleSuccess"
      @fail="handleError"
    ></vab-verify>
  </div>
</template>

<script>
  import VabVerify from '@/plugins/vabVerify'
  export default {
    name: 'Verify',
    components: { VabVerify },
    data() {
      return {
        text: '向右滑动',
      }
    },
    created() {},
    mounted() {},
    methods: {
      handleSuccess() {
//重置滑块
        this.$refs.slideDiv.reset();
        this.$baseMessage('校验成功', 'success')
      },
      handleError() {
        this.$baseMessage('校验失败', 'error')
      },
    },
  }
</script>