ks-vcode

vue 插件, 验证码输入

安装

  npm i -D ks-vcode

使用

main.js

  import Vue from 'Vue'
  import vcode from 'ks-vcode'
  Vue.use(vcode)

app.vue

<template>
  <v-code mode="both" :len="4" @change="vcodeChange" @complete="vcodeComplete"></v-code>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    vcodeChange(code, index) {
      console.log("vcodeChange", code, index)
    },
    vcodeComplete(code) {
      console.log("vcodeComplete", code)
    }
  }
}
</script> 

Props

| prop | 类型 | 取值 | 说明 | |--|--|--|--| | len | number | - | 验证码长度 | | groupClass | string | - | 验证码父容器class | | mode | string | number,letter,mix,all | 输入模式,支持 数字/字母/混合/所有字符 |

Events

| 事件 | 参数 | 说明 | |--|--|--| | change | (code: string[], index: number) | 输入内容改变时触发. code:已输入的验证码, index:当前输入的验证码在code中的索引 | | complete | (code: string[]) | 输入完成时触发. code:已输入的验证码 |