uni

uni

先看下效果如下：

代码如下：
父组件：

<car-license carvalue="" @input="(e) => {platNo = e}"></car-license>

子组件：（代码较长，css部分没有提供）

<template><view class="license-input"><view class="t">请填写车牌号码 <text class="fr" @click="clearCode">清空</text></view><view class="text-enter" style="position: relative"><view class="input-code code0" :class="setClass(0)" @click.stop="chooseFn(0)">{{ carvaluelist[0] }}<text class="colgpla" v-if="!carvaluelist[0]">省</text></view><view class="input-code code1" :class="setClass(1)" @click.stop="chooseFn(1)">{{ carvaluelist[1] }}</view><span class="dian"></span><view class="input-code code2" :class="setClass(2)" @click.stop="chooseFn(2)">{{ carvaluelist[2] }}</view><view class="input-code code3" :class="setClass(3)" @click.stop="chooseFn(3)">{{ carvaluelist[3] }}</view><view class="input-code code4" :class="setClass(4)" @click.stop="chooseFn(4)">{{ carvaluelist[4] }}</view><view class="input-code code5" :class="setClass(5)" @click.stop="chooseFn(5)">{{ carvaluelist[5] }}</view><view class="input-code code6" :class="setClass(6)" @click.stop="chooseFn(6)">{{ carvaluelist[6] }}</view><view class="input-code code7" :class="setClass(7)" @click.stop="chooseFn(7)">{{ carvaluelist[7] }}<view class="code7-pla" v-if="carvaluelist[7]===''"><text class="plus">+</text><text class="plus-txt">新能源</text></view></view></view><view class="pai"><view class="lan" :class="carvaluelist[7]==='' ? 'active' : ''"><image src="@/static/images/etc/Union.png"></image>蓝牌<fan-icon class="check" name="CircleCheckFilled" color="#FC6C2D" size="28rpx" /></view><view class="lv" :class="carvaluelist[7]!=='' ? 'active' : ''"><image src="@/static/images/etc/Union.png"></image>绿牌<fan-icon class="check" name="CircleCheckFilled" color="#FC6C2D" size="28rpx" /></view></view><!-- 选择省 --><u-popup v-model="show" mode="bottom" close-icon-pos="top-right" :border-radius="20" :mask="false" :mask-close-able="false" class="prov-popup"><template v-if="popShow[chooseIndex]"><!-- <view class="prov-title">请选择省份</view> --><view class="prov-pview"><view class="enter-tit"><viewclass="enter-btn"@click="show = false;chooseIndex = -1;">完成</view></view><template v-if="chooseIndex == 0"><view class="prov-item" :class="carvaluelist[chooseIndex] == f ? 'active' : ''" v-for="(f, fi) of strList[0]" :key="fi" @click="chooseCode(f)">{{ f }}</view></template><template v-else><view :class="chooseIndex == 1 ? 'disabled' : ''" style="text-align: center"><viewclass="prov-item s1":class="carvaluelist[chooseIndex] == f ? 'active' : ''"v-for="(f, fi) of 10":key="fi"@click="() => {if (chooseIndex > 1) {chooseCode(fi);}}">{{ fi }}</view></view><view style="padding: 0 30rpx"><view class="prov-item s2" :class="carvaluelist[chooseIndex] == f ? 'active' : ''" v-for="(f, fi) of strList[1]" :key="fi" @click="chooseCode(f)">{{ f }}</view></view></template><view class="del-btn" @click="delCode">删除</view></view></template></u-popup></view>
</template><script>
/***  车牌照输入** ===== 使用场景 ======* 下单页面ETC**/
import { scrollToDistance } from "@/utils/utils";
export default {name: "license-input",props: {carvalue: {type: String,default: "",},},data() {return {show: false,popShow: {"-1": false,0: false,1: false,2: false,3: false,4: false,5: false,6: false,7: false,8: false,},chooseIndex: -1,carvaluelist: this.carvalue && this.carvalue.length > 6 ? this.carvalue.split("") : ["", "", "", "", "", "", "", ""],strList: [["京", "津", "渝", "沪", "冀", "晋", "辽", "吉", "黑", "苏", "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "粤", "琼", "川", "贵", "云", "陕", "甘", "青", "蒙", "桂", "宁", "新", "藏"],["Q", "W", "E", "R", "T", "Y", "U", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M"],],};},mounted() {this.$nextTick(() => {document.querySelector("body").removeEventListener("click", this.addEvent);document.querySelector("body").addEventListener("click", this.addEvent);document.querySelectorAll("input").forEach((el) => {el.removeEventListener("focus", this.addEvent);el.addEventListener("focus", this.addEvent);});document.querySelectorAll("textarea").forEach((el) => {el.removeEventListener("focus", this.addEvent);el.addEventListener("focus", this.addEvent);});this.setClass(-1);});},methods: {addEvent() {this.show = false;this.chooseIndex = -1;},setClass(num) {return `${this.chooseIndex == num ? "focus" : ""} ${this.carvaluelist.join("").length == 8 ? "fill-lv" : this.carvaluelist[num] !== "" ? "fill" : ""}`;// return this.chooseIndex == num && this.carvaluelist[num] ? "focus fill" : this.chooseIndex == num ? "focus" : this.carvaluelist[num] ? "fill" : "";},chooseCode(item) {this.$set(this.carvaluelist, this.chooseIndex, item);this.$set(this.popShow, this.chooseIndex, false);this.chooseIndex = this.chooseIndex + 1;if (this.chooseIndex >= this.carvaluelist.length - 1) {this.chooseIndex = this.carvaluelist.length - 1;}this.$set(this.popShow, this.chooseIndex, true);console.log(this.carvaluelist.join(""));this.$emit("input", this.carvaluelist.join(""));},delCode() {this.$set(this.carvaluelist, this.chooseIndex, "");this.$set(this.popShow, this.chooseIndex, false);this.chooseIndex = this.chooseIndex - 1;if (this.chooseIndex <= 0) {this.chooseIndex = 0;}this.$set(this.popShow, this.chooseIndex, true);},chooseFn(num) {this.show = true;this.chooseIndex = num;for (let key in this.popShow) {this.$set(this.popShow, key, false);}this.$set(this.popShow, this.chooseIndex, true);// 将选择车牌模块滚动到顶部，防止被键盘遮住const c = document.querySelector(`.license-input`).offsetTop - 50;scrollToDistance(0, c);},clearCode() {this.carvaluelist = ["", "", "", "", "", "", "", ""];this.$emit("input", this.carvaluelist.join(""));},},
};
</script>