基于vue的简单验证码

现在网站的验证码很多，而且很多都是第三方提供验证码，简单、美观、高效（比如 网易云易盾、极验等）。
此验证码的基于vue写的，需要的朋友可以参考下

1、实际效果

验证码.png
2、实际代码
html

  <div class="code-box">
        <input type="text" v-model="inputInfo">
        <span class="code-style" @click="createCode">{{verificationCode}}</span>
        <span class="confirm-botton" @click="confirmTheCode">验证</span>
    </div>

js

export default {
    name: '',
    components: {},
    props: {},
    data () {
        return {
            inputInfo:'',   //用户输入信息
            verificationCode:''   //生成的验证码
        }
    },
    created() {},
    methods: {
        createCode:function () {    //通过随机数生成验证码
            this.verificationCode = '';
            var code = '';
            var codeLength = 4;     //验证码长度
            var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');
            for(var i = 0;i<codeLength;i++){
                var index = Math.floor(Math.random()*36);
                code += random[index];
            }
            this.verificationCode = code
        },
        confirmTheCode:function () {      //验证函数
            var customerCode = this.inputInfo.toUpperCase();   //把你输入的小写转化为大写
            if(customerCode == 0){
                this.createCode();
                this.inputInfo = ''
                alert('请输入验证码')
            }else if(customerCode != this.verificationCode){
                this.createCode();
                this.inputInfo = ''
                alert('验证码不正确，请重新输入');
            }else {
                alert('输入正确')
            }
        }
    },
    mounted(){
        this.createCode()
    }
}

css

    .code-box{
        margin-top: 50px;
        text-align: center;
    }
    .code-style{
        font-size: 16px;
        color: red;
        cursor: pointer;
    }
    .confirm-botton{
        display: inline-block;
        width: 50px;
        background-color: #04b4ba;
        font-size: 16px;
        line-height: 32px;
        cursor: pointer;
    }