在vue中实现表单验证码与滑动验证功能的代码详解

npm install vue-verify-code --save

<template>
  <div>
    <vue-verify-code ref="verifyCode" :config="config" @success="onVerifySuccess" @error="onVerifyError"></vue-verify-code>
    <button @click="onRefreshClick">刷新</button>
  </div>
</template>
<script>
import VueVerifyCode from 'vue-verify-code';
export default {
  components: {
    VueVerifyCode,
  },
  data() {
    return {
      config: {
        mode: 'math', // 验证码类型：math（算术验证码），char（字符验证码）
        length: 4, // 验证码长度
        width: 200, // 验证码宽度
        height: 50, // 验证码高度
        font_size: 30, // 字体大小
      },
    };
  },
  methods: {
    onVerifySuccess() {
      console.log('验证成功');
    },
    onVerifyError() {
      console.log('验证失败');
    },
    onRefreshClick() {
      this.$refs.verifyCode.refresh();
    },
  },
};
</script>

<template>
  <div>
    <vue-slide-verify @success="onVerifySuccess" @error="onVerifyError"></vue-slide-verify>
  </div>
</template>
<script>
import { VueSlideVerify } from 'vue-verify-code';
export default {
  components: {
    VueSlideVerify,
  },
  methods: {
    onVerifySuccess() {
      console.log('验证成功');
    },
    onVerifyError() {
      console.log('验证失败');
    },
  },
};
</script>