概要
` 利用vue的 vue-puzzle-vcode插件实现验证码功能。
结尾有示例完整代码
场景示例及其讲解
下载插件
利用npm/cnpm下载插件代码
npm i -S vue-puzzle-vcode
导入组件
import vcode from 'vue-puzzle-vcode'
使用组件
设置data、success（成功返回函数）、close（关闭函数）
data(){ return{ isShow:false } }, methods:{ // 成功时关闭页面 success(){ this.isShow=false }, // 点击遮罩层关闭 close(){ this.isShow=false } } }
在上述代码中，首先默认isShow判断数据为false，在mounted或自带方法中定义isShow为true，在验证成功或点击遮罩层后调用成功函数通过让isShow数据为false来控制验证码的显示与隐藏。
<vcode :show="isShow" @success="success" @close="close"></vcode>
上述代码主要作用为调用组件vcode，调用后设置:show是否隐藏验证码，@success成功函数以及close关闭函数。
示例代码
<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>
