6格子密码输入框【vue+element】
当前格子输入后自动聚焦下一个小格子;
最后一个格子时,blur失去焦点,输入完毕;
父组件内绑定自定义getBackInfo事件传递输入值至父组件
具体实现
引入: import INPUTPASSWORD from "@/components/inputPassWord"
注册组件:components: { INPUTPASSWORD },
html写入标签 :<INPUTPASSWORD ref="pwComponent" @getBackInfo="backInfoForconnect" />
绑定getBackInfo事件:@getBackInfo="backInfoForconnect"
定义事件函数 backInfoForconnect
父组件调用组件事件:this.$refs['pwComponent'].clearAllNumber()
或者 setup()函数中 numberState['pwComponent'].clearAllNumber()
HTML
<template> <div class="input-box"> <div class="sixNumber"> <el-input class="itemInSix" type="password" ref="num1" @keyup="loseBlur('1')" v-model="num11" /> <el-input class="itemInSix" type="password" @keyup="loseBlur('2')" v-model="num22" ref="num2" /> <el-input class="itemInSix" type="password" @keyup="loseBlur('3')" v-model="num33" ref="num3" /> <el-input class="itemInSix" type="password" @keyup="loseBlur('4')" v-model="num44" ref="num4" /> <el-input class="itemInSix" @keyup="loseBlur('5')" type="password" v-model="num55" ref="num5" /> <el-input class="itemInSix" @keyup="loseBlur('6')" type="password" v-model="num66" ref="num6" /> <!-- 清空 --> <el-button @click="clearAllNumber">重置</el-button> </div> </div> </template>Script
<script> import { reactive, toRefs, computed } from "vue"; export default { props: ['data'], emits: { // 传回父级数据 getBackInfo: (value) => { return value; } }, setup(props, content) { const numberState = reactive({ // 调用父级绑定事件getBackInfo,返回长度为6的拼接值; getMemInfo() { content.emit("getBackInfo", numberState.pd); }, pd: computed(() => { // 拼接输入的所有小格子输入为一个值; let pass = "" + (numberState.num11 ?? "") + (numberState.num22 ?? "") + (numberState.num33 ?? "") + (numberState.num44 ?? "") + (numberState.num55 ?? "") + (numberState.num66 ?? ""); return pass; }), // ref绑定值 num1: null, num2: null, num3: null, num4: null, num5: null, num6: null, // v-model值 num11: undefined, num22: undefined, num33: undefined, num44: undefined, num55: undefined, num66: undefined, loseBlur(id) { // backspace删除小格子内容为空白时 if (!numberState["num" + id + id] && numberState["num" + id + id] !== 0) { numberState["num" + id + id] = undefined; return; } if (typeof numberState["num" + id + id] === 'string') { //替换所有非数字为空 numberState["num" + id + id] = numberState["num" + id + id].replace(/\D/g,""); numberState["num" + id + id] = numberState["num" + id + id].split("")[0] ? numberState["num" + id + id].split("")[0] : undefined; goFocus(); } else { //替换所有非数字为空 numberState["num" + id + id] = (numberState["num" + id + id]).toString().replace(/\D/g,""); numberState["num" + id + id] = (numberState["num" + id + id]).toString().split("")[0] ? (numberState["num" + id + id]).toString().split("")[0] : undefined; goFocus(); } function goFocus() { // 空白不聚焦下一个 if(!numberState["num" + id + id]){ return false; } // 聚焦下一个 let number = null; if (Number(id) < 6) { number = Number(id) + 1; let indexAA = "num" + number; numberState[indexAA].focus(); } else { number = 6; let indexAA = "num" + number; numberState[indexAA].blur(); } } }, clearAllNumber() { numberState.num11 = undefined; numberState.num22 = undefined; numberState.num33 = undefined; numberState.num44 = undefined; numberState.num55 = undefined; numberState.num66 = undefined; numberState['num1'].focus(); } }) return { ...toRefs(numberState) } }, watch: { pd: { // 小格子数值变更 同步传递数值到父组件; handler: function (val) { this.getMemInfo(); } }, // 如果父级传来回显密码 data: { handler: function (val) { if (val) { let string = ""; if (typeof val === 'number') { string = val.toString(); } else { string = val; } let arr = string.split(''); arr.forEach((item, index) => { this['num' + (index + 1) + (index + 1)] = Number(item); }) } }, immediate: true } }, data() { return { }; }, methods: { }, created() { } } </script>