【uniapp】短信验证码输入框

需求是短信验证码需要格子输入框如图

在这里插入图片描述

网上找了一个案例改吧改吧直接上代码

结构

在这里插入图片描述


<template><view class="verify-code"><!-- 输入框 --><input id="input" :value="code" class="input" :focus="isFocus" :type="inputType" :maxlength="itemSize"@input="onInput" @focus="inputFocus" @blur="inputBlur" /><!-- 光标 --><view id="cursor" v-if="cursorVisible && type !== 'middle'" class="cursor":style="{ left: codeCursorLeft[code.length] + 'px', height: cursorHeight + 'px', backgroundColor: cursorColor }"></view><!-- 输入框 - 组 --><view id="input-ground" class="input-ground"><view v-for="(item, index) in itemSize" :key="index":style="{ borderColor: code.length === index && cursorVisible ? boxActiveColor : boxNormalColor }":class="['box', `box-${type + ''}`, `box::after`]"><view :style="{ borderColor: boxActiveColor }" class="middle-line"v-if="type === 'middle' && !code[index]"></view><text class="code-text">{{ code[index] | codeFormat(isPassword) }}</text></view></view></view>
</template><script>/*** @description 输入验证码组件* @property {string} type = [box|middle|bottom] - 显示类型 默认：box -eg:bottom* @property {string} inputType = [text|number] - 输入框类型 默认：number -eg:number* @property {number} size - 验证码输入框数量 默认：6 -eg:6* @property {boolean} isFocus - 是否立即聚焦 默认：true* @property {boolean} isPassword - 是否以密码形式显示 默认false -eg: false* @property {string} cursorColor - 光标颜色 默认：#cccccc* @property {string} boxNormalColor - 光标未聚焦到的框的颜色 默认：#cccccc* @property {string} boxActiveColor - 光标聚焦到的框的颜色 默认：#000000* @event {Function(data)} confirm - 输入完成回调函数*/import {getElementRect} from './util.js';export default {name: 'verify-code',props: {value: {type: String,default: () => ''},type: {type: String,default: () => 'box'},inputType: {type: String,default: () => 'number'},size: {type: Number,default: () => 6},isFocus: {type: Boolean,default: () => true},isPassword: {type: Boolean,default: () => false},cursorColor: {type: String,default: () => '#cccccc'},boxNormalColor: {type: String,default: () => '#cccccc'},boxActiveColor: {type: String,default: () => '#000000'}},model: {prop: 'value',event: 'input'},data() {return {cursorVisible: false,cursorHeight: 35,code: '', // 输入的验证码codeCursorLeft: [], // 向左移动的距离数组,itemSize: 6,getElement: getElementRect(this),isPatch: false};},created() {this.cursorVisible = this.isFocus;this.validatorSize();},mounted() {this.init();},methods: {/*** 设置验证码框数量*/validatorSize() {if (this.size > 0) {this.itemSize = Math.floor(this.size);} else {throw "methods of 'size' is integer";}},/*** @description 初始化*/init() {this.getCodeCursorLeft();this.setCursorHeight();},/*** @description 计算光标的高度*/setCursorHeight() {this.getElement('.box', 'single', boxElm => {this.cursorHeight = boxElm.height * 0.6;});},/*** @description 获取光标在每一个box的left位置*/getCodeCursorLeft() {// 获取父级框的位置信息this.getElement('#input-ground', 'single', parentElm => {const parentLeft = parentElm.left;// 获取各个box信息this.getElement('.box', 'array', elms => {this.codeCursorLeft = [];elms.forEach(elm => {this.codeCursorLeft.push(elm.left - parentLeft + elm.width / 2);});});});},// 输入框输入变化的回调onInput(e) {let {value,keyCode} = e.detail;this.cursorVisible = value.length < this.itemSize;this.code = value;this.$emit('input', value);this.inputSuccess(value);},// 输入完成回调inputSuccess(value) {if (value.length === this.itemSize && !this.isPatch) {this.$emit('confirm', value);} else {this.isPatch = false;}},// 输入聚焦inputFocus() {this.cursorVisible = this.code.length < this.itemSize;},// 输入失去焦点inputBlur() {this.cursorVisible = false;}},watch: {value(val) {if (val !== this.code) {this.code = val;}}},filters: {codeFormat(val, isPassword) {return val ? (isPassword ? '*' : val) : '';}}};
</script>
<style scoped>.verify-code {position: relative;width: 100%;box-sizing: border-box;}.verify-code .input {height: 100%;width: 200%;position: absolute;left: -100%;z-index: 1;color: transparent;caret-color: transparent;background-color: rgba(0, 0, 0, 0);}.verify-code .cursor {position: absolute;top: 50%;transform: translateY(-50%);display: inline-block;width: 2px;animation-name: cursor;animation-duration: 0.8s;animation-iteration-count: infinite;}.verify-code .input-ground {display: flex;justify-content: space-between;align-items: center;width: 100%;box-sizing: border-box;}.verify-code .input-ground .box {position: relative;display: inline-block;width: 100rpx;height: 140rpx;}.verify-code .input-ground .box-bottom {border-bottom-width: 2px;border-bottom-style: solid;}.verify-code .input-ground .box-box {border-width: 2px;border-style: solid;}.verify-code .input-ground .box-middle {border: none;}.input-ground .box .middle-line {position: absolute;top: 50%;left: 50%;width: 50%;transform: translate(-50%, -50%);border-bottom-width: 2px;border-bottom-style: solid;}.input-ground .box .code-text {position: absolute;top: 50%;left: 50%;font-size: 80rpx;transform: translate(-50%, -50%);}@keyframes cursor {0% {opacity: 1;}100% {opacity: 0;}}
</style>

util.js

/*** @description 获取元素节点 - 大小等信息* @param {string} elm - 节点的id、class 相当于 document.querySelect的参数 -eg: #id* @param {string} type = [single|array] - 单个元素获取多个元素 默认是单个元素* @param {Function} callback - 回调函数* @param {object} that - 上下文环境 vue2：this ,vue3: getCurrentInstance();*/
export const getElementRect = (that) => (elm, type = 'single', callback) => {// #ifndef H5uni.createSelectorQuery().in(that)[type === 'array' ? 'selectAll' : 'select'](elm).boundingClientRect().exec(data => {callback(data[0]);});// #endif// #ifdef H5let elmArr = [];const result = [];if (type === 'array') {elmArr = document.querySelectorAll(elm);} else {elmArr.push(document.querySelector(elm));}for (let elm of elmArr) {result.push(elm.getBoundingClientRect());}console.log('result', result)callback(type === 'array' ? result : result[0]);// #endif
}