202206-18|Vue mutui identify图片验证码

举报
写程序的小王叔叔 发表于 2022/06/16 10:02:20 2022/06/16
【摘要】 主页:小王叔叔的博客支持:点赞👍关注✔️收藏💖一、效果:二、插件引用1)首先执行命令: npm install identify 引入插件包npm install identify 2)配置main.jsimport SIdentify from './components/identify/identify'Vue.use(SIdentify)3)vue组件中编写代码3.1)组件 <...

主页小王叔叔的博客

支持:点赞👍关注✔️收藏💖


一、效果:

二、插件引用

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

npm install identify 

2)配置main.js

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

3)vue组件中编写代码

3.1)组件

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

3.2)组件js

import Identify from '@/components/identify/identify'


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





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

⚠️注意 ~

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

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

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

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。