Tag Archives: Vue mutui identify

Vue mutui identify (Image Verification Code)

Leave a reply

1. Effect:

2. the plug-in reference

1) First execute the command: npm install identify to introduce the plugin package

npm install identify

2) Configure main.js

import SIdentify  from './components/identify/identify'
Vue.use(SIdentify)

3) Write code in vue components

3.1) Components

 <div class="form-group">
            <input type="text" class="check_code" placeholder="Проверочный код" v-model="verCode" />
            <div class="login_code" @click="refreshCode">
              <!--Captcha component-->
              <Identify :identifyCode="identifyCode" ></Identify>
            </div>              
        </div>

3.2) Component js

import Identify from '@/components/identify/identify'
xport default {
  components:{Identify},
  data() {
    return {
         verCode: "",//Image verification code input box
          identifyCode:'',
          identifyCodes:'1234567890',
    };
  },
 methods:{
         randomNum(min, max) {
          return Math.floor(Math.random() * (max - min) + min);
        },
        refreshCode() {
          this.identifyCode = "";
          this.makeCode(this.identifyCodes, 4);
        },
        makeCode(o, l) {
          for (let i = 0; i < l; i++) {
            this.identifyCode += this.identifyCodes[
              this.randomNum(0, this.identifyCodes.length)
            ];
          }
        } 
},
 mounted() {
        this.identifyCode = "";
        this.makeCode(this.identifyCodes, 4);  
    },