基于vue的简单验证码

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

1、实际效果

验证码.png

2、实际代码
html

  

        
        {{verificationCode}}
        验证
    

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

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;
    }