vue 实现数字验证码功能

需求：写了一个 手机发送验证码后 输入固定验证码的功能

 封装成一个组件,如下:

<template><div class="conts"><div class="box"><div class="code_list"><div :class="[ 'code_item', hideIndex == 0 ? 'code_item-focus' : '', value[0] ? 'shows_shaw' : '', ]">{{ value[0] }}</div><div :class="[ 'code_item', hideIndex == 1 ? 'code_item-focus' : '', value[1] ? 'shows_shaw' : '', ]">{{ value[1] }}</div><div :class="[ 'code_item', hideIndex == 2 ? 'code_item-focus' : '', value[2] ? 'shows_shaw' : '', ]">{{ value[2] }}</div><div :class="[ 'code_item', hideIndex == 3 ? 'code_item-focus' : '', value[3] ? 'shows_shaw' : '', ]">{{ value[3] }}</div></div><input v-model="value" class="field-input" type="number" maxlength="4" @input="input()" @focus="focus()" @blur="blur()" /></div></div>
</template><script>
export default {data() {return {value: '',index: 0,hideIndex: null,show_box: false,}},methods: {input() {const v = this.value.replace(/[^\d]/g, '');this.value = v;this.index = v.length;this.hideIndex = v.length;this.$emit('getPassword', v);},// 获取焦点focus() {this.hideIndex = this.index;this.show_box = true;},// 失去焦点blur() {this.hideIndex = null;this.show_box = false;},},
}
</script><style lang="less">
.conts {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;text-align: center;.box {position: relative;width: 85%;overflow: hidden;.code_list {display: flex;justify-content: space-between;border: 1px solid transparent;padding: 5px;border-radius: 3px;}}.field-input {box-sizing: border-box;position: absolute;top: 0;right: 0;width: 100%;height: 59px;padding: 0;border: none;outline: none;opacity: 0;background: transparent;}
}
.shows_shaw {border: 1px solid #0187fb !important;
}
.code_item {box-sizing: border-box;width: 59px;height: 59px;line-height: 59px;font-size: 24px;text-align: center;font-weight: 400;background-color: #f2f5f4;border: 1px solid transparent;border-radius: 4px;margin-right: 7px;&:last-child {margin-right: 0;}
}
.code_item-focus {border-color: #0187fb;&::before {content: "";display: block;width: 2px;height: 24px;margin: 17px auto;background: #0187fb;animation: blink 1s steps(1) infinite;}
}
@keyframes blink {50% {opacity: 0;}
}
</style>

引用

<room-password @getPassword="getPassword"></room-password>/引入
import roomPassword from '@/components/roomPassword'//方法getPassword(val) {console.log('val', val);},