uni-车牌输入功能，类似与支付宝密码框
uni-车牌输⼊功能，类似与⽀付宝密码框
遇到这么⼀个需求：
车牌号输⼊，并且是每次输⼊后，每⼀位输⼊字符在占⼀个格⼦。
由于车牌号的构成对于密码⽽⾔⽐较复杂，否则可以模拟⼀个键盘，来控制和判断输⼊的内容，这样这个效果就⽐较简单。但是⽤于车牌输⼊的键盘内容⽐较多，所以这边⽤另外的⽅法。
⾸先创建⼀个input
<input :focus="bFocus" type="text" v-model="sCar" class="ipt-hide" @input="fInput" :maxlength="bIsUnit?7:8" @blur="fBlur" />
添加⼀些基础的事件，并且将其隐藏，隐藏样式⽐较特殊，可在⽂末全部代码处查看
然后创建⽅框等元素
<view class="car-item" v-for="nIndex in cCarNum" :class="{active:nIndex===sCar.length}" :key="nIndex">
{{sCar.split('')[nIndex]?sCar.split('')[nIndex].toUpperCase():''}}
新摩托车保养</view>
当点击⽅框时，输⼊框聚焦，然后输⼊的字符处理后挨个排放⼊框内。
但是这个完成后有个bug，
当输⼊字符后，经过多次修改，尤其是在请求之后，隐藏的输⼊框被聚焦时，光标会跳到最前，导致内容⽆法修改，或者输⼊的字符永远在已存在字符的前⾯。这种情况通过清空字符时解决不了的。
所以解决⽅案是在请求后重载组件，重载⽅法是在input上添加key，请求后改变key来实现组件重载
<comp-car @fCb="fCarIpt" ref="compcar" :key="nComp"></comp-car>
nComp: Math.random()
但是重载的⽅法在⼩程序上经过测试失效了，更改key并不能让组件重载，但是⼩程序内测试时也未出现该bug，所以⼩程序内就直接清空字符处理后不再进⾏更多操作；
组件的全部代码如下：
app：
<template>
<view class="car" @tap="fFocus">
<input :focus="bFocus" type="text" v-model="sCar" class="ipt-hide" @input="fInput" :maxlength="bIsUnit?7:8" @blur="fBlur" />
<view class="car-item" v-for="nIndex in cCarNum" :class="{active:nIndex===sCar.length}" :key="nIndex">
{{sCar.split('')[nIndex]?sCar.split('')[nIndex].toUpperCase():''}}
</view>
<view class="car-item car-change" @tap.stop="fChange"><i class="iconfont"></i><text>{{bIsUnit?'新能源':'普通'}}</text></view>
</view>
</template>
<script>
export default {
data() {
return {
sCar: '苏',
bIsUnit: true,
bFocus: false,
cursor: 1
}
},
computed: {
cCarNum() {
return this.bIsUnit ? [0, 1, 2, 3, 4, 5, 6] : [0, 1, 2, 3, 4, 5, 6, 7]; //车牌位数
}
},
onLoad(option) {
},
methods: {
fClear() {
this.sCar = '苏';
this.bIsUnit = true;
this.bFocus = false;
},
fChange() {
this.sCar = '苏';
this.bFocus = false;
this.bIsUnit = !this.bIsUnit;
this.$emit('fCb', {
sCar: UpperCase(),
bIsUnit: this.bIsUnit
})
},
fBlur() {
this.bFocus = false;
眼镜框品牌},
fFocus() {
this.bFocus = true;
},
fInput() {
this.$emit('fCb', {
sCar: UpperCase(),
bIsUnit: this.bIsUnit
})
}
},
mounted() {
this.fClear()
}
}
</script>
<style scoped lang="less">
.car {
display: flex;
flex-direction: row;
justify-content: center;
梦幻西游如何养孩子align-items: center;
height: 44px;
width: 100%;
padding: 5px;
box-sizing: border-box;
}
.car-item {
height: 42px;
width: 36px;
margin: 0 2px;
text-align: center;
line-height: 42px;
color: #3e3e3e;
font-size: 18px;
border: 1px solid #b2b2b2;
border-radius: 3px;
}
.active {
border-color: #19bbff;
}
.ipt-hide {
position: absolute;
z-index: -1;
left: -100%;供暖温度
opacity: 0
}
.car-change {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-style: dotted;
font-size: 10px;
如何恢复删除的视频
line-height: 2;
color: #7f7f7f;
.iconfont {
font-size: 10px;
}
}
</style>
⼩程序内代码稍有改动，遍历渲染字符串时可以直接使⽤数字⽽不⽤数组
⼩程序代码：
<template>
<view class="car" @tap="fFocus">
<input :focus="bFocus" type="text" v-model="sCar" class="ipt-hide" @input="fInput" :maxlength="cCarNum" @blur="fBlur" />
<view class="car-item" v-for="nIndex in cCarNum" :class="{active:nIndex===sCar.length-1}":key="nIndex">
{{sCar.split('')[nIndex]?sCar.split('')[nIndex].toUpperCase():''}}
</view>
<view class="car-item car-change" @tap.stop="fChange"><i class="iconfont"></i><text>{{bIsUnit?'新能源':'普通'}}</text></view>    </view>
</template>
<script>
export default {
data() {
return {
sCar: '苏',
bIsUnit: true,
bFocus: false
}
},
computed: {
cCarNum() {
return this.bIsUnit ? 7 : 8; //车牌位数
}
},
onLoad(option) {
},
methods: {
fClear() {
this.sCar = '苏';
this.bIsUnit = true;
this.bFocus = false;
},
fChange() {
this.sCar = '苏';
this.bFocus = false;
this.bIsUnit = !this.bIsUnit;
},
fBlur() {
this.bFocus = false;
},
fFocus() {
this.bFocus = true;
},
fInput() {
this.$emit('fCb', {
sCar: UpperCase(),
bIsUnit: this.bIsUnit
})
}
},
mounted() {
this.fClear()
}
}
</script>
<style scoped lang="less">
.
car {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 42px;
width: 100%;
padding: 5px;
box-sizing: border-box;
}
.car-item {
height: 42px;
width: 36px;
margin: 0 2px;
text-align: center;
line-height: 42px;
color: #3e3e3e;
font-size: 18px;
border: 1px solid #b2b2b2;
border-radius: 3px;
}
.active {
border-color: #19bbff;
}
.ipt-hide {
position: absolute;
z-index: -1;
left: -100%;
opacity: 0
}
.car-change {
display: flex;
flex-direction: column;        align-items: center;
justify-content: center;        border-style: dotted;        font-size: 10px;
line-height: 2;
color: #7f7f7f;
.iconfont {
font-size: 10px;
小学生操行评语
}
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。