轻松实现验证码！Vue-Puzzle-Vcode插件让你在登录注册页面更有安全感

npm i -S vue-puzzle-vcode

import vcode from 'vue-puzzle-vcode'

 data(){
            return{
                isShow:false
            }
        },
        methods:{
            // 成功时关闭页面
            success(){
                this.isShow=false
            },
            // 点击遮罩层关闭
            close(){
                this.isShow=false
            }
        }
    }

<template>
    <div>
        <vcode :show="isShow" @success="success" @close="close"></vcode>
    </div>
</template>
<script>
import vcode from 'vue-puzzle-vcode'
    export default{
        name:"helloheaders",
        components:{
            vcode
        } ,
        data(){
            return{
                LoginName:"",
                isShow:false
            }
        },
        mounted(){
            this.isShow=true
        },
        methods:{
            // 成功时关闭页面
            success(){
                this.isShow=false
            },
            // 点击遮罩层关闭
            close(){
                this.isShow=false
            }
        }
    }
</script>
<style scoped>
h1{
    margin:0 auto;
    padding:20px;
}
</style>