password-input

Project setup

npm i --save vue-password-input 或者 yarn add vue-password-input

全局引入

import  passwordInput  from 'vue-password-input'
import "vue-password-input/lib/simplePasswordInputs.css";
Vue.use(passwordInput)

局部引入

import  passwordInput  from 'vue-password-input'
import "vue-password-input/lib/simplePasswordInputs.css";
components:{
   passwordInput
}

模板引入

 <PasswordInputs ref="inputs"
                     :pwdTexts="pwdTexts"
                     :currentFocusIndex="currentFocusIndex"
                     @pwdsChange="pwdsChange"
                     @currentFocusIndexChange="currentFocusIndexChange" />

调用

 export default {
    name:'App',
    data:()=>({
      pwdTexts: ['', '', '', '', '', ''], //数字的密码
      currentFocusIndex: 0,//焦点从哪里开始

    }),
    methods:{
	//输入密码监听
      pwdsChange ({ index, value }) { 
        if (index === 5) {
          console.log(index, value);
          console.log(this.pwdTexts);
          console.log('调用接口')
          // 调用接口回调支付
        }
      },
	  //下标监听
      currentFocusIndexChange (index) {
        this.currentFocusIndex = index
      },
    }
  }

调用

属性：
pewTexts数字密码值
事件
pwdsChange 监听输入的密码值
currentFocusIndexChange 监听当前的下标，光标的位置。

清空当前的值 初始化方法(ref可自定义) 找到子组件的clear()方法
this.$refs.inputs.clear()