6格子密码输入框【vue+element】

6格子密码输入框

1.1 效果图预览;

1.2 组件效果描述：

1. 当前格子输入后自动聚焦下一个小格子；
2. 最后一个格子时,blur失去焦点,输入完毕;
3. 父组件内绑定自定义getBackInfo事件传递输入值至父组件

1.3 调用方法 ：

1. 引入： import INPUTPASSWORD from "@/components/inputPassWord"
2. 注册组件：components: { INPUTPASSWORD },
3. html写入标签 ：<INPUTPASSWORD ref="pwComponent" @getBackInfo="backInfoForconnect" />
4. 绑定getBackInfo事件：@getBackInfo="backInfoForconnect"
5. 定义事件函数 backInfoForconnect
6. 父组件调用组件事件：this.$refs['pwComponent'].clearAllNumber()
或者 setup()函数中 numberState['pwComponent'].clearAllNumber()

1.4 具体代码段：

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>

CSS

<style scoped>
.sixNumber {
    display: flex;
    align-items: center;
    width: 400px;
}
.sixNumber .itemInSix {
    margin: 0 2px;
}
</style>