先看下效果如下：
代码如下：
父组件：文章来源：https://www.toymoban.com/news/detail-802812.html
<car-license carvalue="" @input="(e) => {platNo = e}"></car-license>
子组件：（代码较长，css部分没有提供）文章来源地址https://www.toymoban.com/news/detail-802812.html
<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">
<view
class="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">
<view
class="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>
到了这里，关于uni-app/vue封装车牌选择器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
