vue-verification-input

方形验证码框 支持快速粘贴

链接

demo npm

用法

$ yarn add vue-verification-input -S
# or
$ npm i vue-verification-input -S

1. 全局组件使用

   import Vue from 'vue'
   import VerificationCodeInput from 'vue-verification-input'
   Vue.component('VerificationCodeInput', VerificationCodeInput)

2. 局部组件

   import VerificationCodeInput from 'vue-verification-input'
   export default {
     components: {
       VerificationCodeInput
     }
   }

3. template

   <verification-code-input
       :wrong="[Boolean]"
       :type="[String]"
       :item-class="[String]"
       :max-length="[Number]"
       item-margin="20px 10px"
       :item-active-class="[String]"
       :item-wrong-class="[String]"
       @deleteEvent="deleteEvent"
       @finishEvent="finishEvent"
   ></verification-code-input>

   | Props | 描述 | 默认值 | 必须/可选 | | ----------------- | ------------------------------ | ------ | --------- | | wrong | 用来控制验证框的状态 | false | 必须 | | type | Input 类型，一般选用 tel或text | tel | 可选 | | item-class | 单个框的样式 | 如下 | 可选 | | max-length | 输入框个数 | 6 | 可选 | | item-margin | 单个框左右和上下的间距 | 10px 0 | 可选 | | item-active-class | 单个框输入时的高亮样式 | 如下 | 可选 | | item-wrong-class | 错误回调后的每个框的高亮样式 | 如下 | 可选 |

   // item-class item-active-class item-wrong-class 的默认样式
   .item-class {
     height: 50px;
     width: 40px;
     border: 1px solid #f8f8f8;
     background: #f8f8f8;
     border-radius: 5px;
     font-size: 22px;
     color: #333333;
   }
      
   .item-active-class {
     border: 1px solid #14B9C8;
   }
      
   .item-wrong-class {
     border: 1px solid #F25A5A;
   }

   | emit | 描述 | 参数 | | ----------- | ---------------- | -------------------- | | deleteEvent | 删除事件 | 会传入删除前输入的值 | | finishEvent | 完整输入后的事件 | 会传入完成时输入的值 |

   deleteEvent(code) {
     // code 删除前输入的值
     this.wrong = false
   },
   finishEvent(code) {
     // code 完成时输入的值
     this.wrong = true
   },

   需要注意的是，props 中的 wrong 需要与两个emit 共同作用，用来在不同阶段控制输入框的状态。