Vue实现验证码控件

1、目标效果

 2、代码

  • 结构
 1 <template>
 2   <div class="vertify-box">
 3     <div class="vertify">
 4       <img
 5         src="@/assets/logo.png"
 6         alt=""
 7       >
 8       <input
 9         v-model="vertifyCode"
10         type="text"
11         placeholder="请输入验证码"
12       >
13     </div>
14     <div class="vertify-position">
15       <input
16         v-model="checkCode"
17         type="button"
18         @click="createCode"
19       >
20     </div>
21   </div>
22 </template>
  • 交互
 1 <script>
 2 export default {
 3   data () {
 4     return {
 5       vertifyCode: '',
 6       checkCode: ''
 7     }
 8   },
 9   created () {
10     this.createCode()
11   },
12   methods: {
13     /**
14      * @description: 创建验证码
15      * @param {*}
16      * @return {*}
17      */
18     createCode () {
19       // 先清空验证码的输入
20       let code = ''
21       this.checkCode = ''
22       this.vertifyCode = ''
23       // 验证码的长度
24       const codeLength = 4
25       // 随机数
26       const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
27       for (let i = 0; i < codeLength; i++) {
28         // 取得随机数的索引（0~35）
29         const index = Math.floor(Math.random() * 36)
30         // 根据索引取得随机数加到code上
31         code += random[index]
32       }
33       // 把code值赋给验证码
34       this.checkCode = code
35     }
36   }
37 }
38 </script>
  • 样式
 1 <style lang="less" scoped>
 2 .vertify-box {
 3   display: flex;
 4   justify-content: space-around;
 5   width: 350px;
 6   height: 100px;
 7   background-color: black;
 8 
 9   .vertify {
10     margin-right: 5px;
11     margin-top: 20px;
12     width: 203px !important;
13     height: 46px;
14     line-height: 46px;
15     border: 1px solid #00ffb3;
16     background: rgba(0, 229, 255, 0.1);
17     display: flex;
18 
19     img {
20       margin: 15px;
21       width: 18px;
22       height: 18px;
23     }
24 
25     input {
26       flex: 1;
27       width: 100%;
28       font-size: 16px;
29       color: #fff;
30       background: transparent;
31       border: none;
32       &:focus {
33         background: transparent;
34         outline: none;
35       }
36     }
37   }
38 
39   .vertify-position {
40     width: 93px;
41     height: 46px;
42     margin-top: 20px;
43     line-height: 46px;
44 
45     input {
46       width: 100%;
47       height: 100%;
48       border: 1px solid #00ffb3;
49       background: rgba(0, 229, 255, 0.1);
50       font-family: 'Microsoft YaHei';
51       font-style: italic;
52       color: #00ffb3;
53       padding: 0 17px;
54       letter-spacing: 2px;
55       font-size: 18px;
56       font-weight: 700;
57       cursor: pointer;
58     }
59   }
60   ::-webkit-input-placeholder {
61     /* WebKit, Blink, Edge */
62     color: #ddd;
63   }
64 }
65 </style>

 

『参考』

 

posted @ 2021-09-26 16:31  自在逍遥处  阅读(387)  评论(0)  编辑  收藏  举报