Vue mutui identify图片验证码

简介: Vue mutui identify图片验证码

主页:写程序的小王叔叔的博客欢迎来访👀

支持:点赞收藏关注



一、效果:

二、插件引用

1)首先执行命令: npm install identify 引入插件包

npm install identify

2)配置main.js

import SIdentify  from './components/identify/identify'
Vue.use(SIdentify)

3)vue组件中编写代码

3.1)组件

<divclass="form-group"><inputtype="text"class="check_code"placeholder="Проверочный код"v-model="verCode"/><divclass="login_code"@click="refreshCode"><!--验证码组件--><Identify:identifyCode="identifyCode"></Identify></div></div>

3.2)组件js

importIdentifyfrom'@/components/identify/identify'xportdefault {
components:{Identify},
data() {
return {
verCode: "",//图片验证码输入框identifyCode:'',
identifyCodes:'1234567890',
    };
  },
methods:{
randomNum(min, max) {
returnMath.floor(Math.random() * (max-min) +min);
        },
refreshCode() {
this.identifyCode="";
this.makeCode(this.identifyCodes, 4);
        },
makeCode(o, l) {
for (leti=0; i<l; i++) {
this.identifyCode+=this.identifyCodes[
this.randomNum(0, this.identifyCodes.length)
            ];
          }
        } 
},
mounted() {
this.identifyCode="";
this.makeCode(this.identifyCodes, 4);  
    },




转载声明:本文为博主原创文章,未经博主允许不得转载

⚠️注意 ~

💯本期内容就结束了,如果内容有误,麻烦大家评论区指出

如有疑问❓可以在评论区💬或私信💬,尽我最大能力🏃‍♀️帮大家解决👨‍🏫!

如果我的文章有帮助,欢迎点赞+关注✔️鼓励博主🏃,您的鼓励是我分享的动力🏃🏃🏃~

相关文章
|
20天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
110 1
|
1月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
64 18
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
2月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
45 1
|
5月前
|
存储 NoSQL 数据库
认证服务---整合短信验证码,用户注册和登录 ,密码采用MD5加密存储 【二】
这篇文章讲述了在分布式微服务系统中添加用户注册和登录功能的过程,重点介绍了用户注册时通过远程服务调用第三方服务获取短信验证码、使用Redis进行验证码校验、对密码进行MD5加密后存储到数据库,以及用户登录时的远程服务调用和密码匹配校验的实现细节。
认证服务---整合短信验证码,用户注册和登录 ,密码采用MD5加密存储 【二】
|
24天前
|
安全 算法 机器人
双重防护!红娘相亲app搭建开发,婚恋交友系统登录方式,密码+验证码的优势
在婚恋交友系统中,密码和验证码是两种重要的安全措施。密码用于验证用户身份,应设置为复杂组合以防止未经授权的访问;验证码则通过图形或字符识别,防止自动化攻击如暴力破解和注册机器人。两者同时开启可显著提高安全性,防止暴力破解和自动化注册,提升用户信任感。建议要求强密码、定期更新验证码样式,并在可疑登录时增加验证码复杂性。这样既能保障用户信息安全,又兼顾了用户体验。 ![交友11111.jpg](https://ucc.alicdn.com/pic/developer-ecology/hy2p6wcvgk4oe_c9eb8d6eb8144866b0cd1d96ffb0c907.jpg)
|
3月前
|
Java
Java 登录输入的验证码
Java 登录输入的验证码
45 1