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

文章目录

• • 概要
  • 场景示例及其讲解
  • • 下载插件
    • 导入组件
    • 使用组件
  • 示例代码

概要

` 利用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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！