vue-verification-input

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

演示

用法

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

全局组件使用

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

局部组件

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

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 共同作用，用来在不同阶段控制输入框的状态。

YasinChan/vue-verification-input

vue-verification-input

演示

用法