需求是短信验证码需要格子输入框 如图
网上找了一个案例改吧改吧 直接上代码
结构
javascript
<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
javascript
/**
* @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 H5
uni
.createSelectorQuery()
.in(that)[type === 'array' ? 'selectAll' : 'select'](elm)
.boundingClientRect()
.exec(data => {
callback(data[0]);
});
// #endif
// #ifdef H5
let 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
}