uniapp、微信小程序车牌的录入的解决方案

本文主要是介绍uniapp、微信小程序车牌的录入的解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

结合uv-ui进行编写，键盘使用uv-ui的组件，其他由我们自己编写。

<template><div class="addCarContent"><div class="boxContent"><div class="carCodeInput" @click="getIndex"><div:class="[index === 0 && showActive ? 'input_active' : '', 'input']">{{ CarCode[0] }}</div><div:class="[index === 1 && showActive ? 'input_active' : '', 'input']">{{ CarCode[1] }}</div><div class="point"></div><div:class="[index === 2 && showActive ? 'input_active' : '', 'input']">{{ CarCode[2] }}</div><div:class="[index === 3 && showActive ? 'input_active' : '', 'input']">{{ CarCode[3] }}</div><div:class="[index === 4 && showActive ? 'input_active' : '', 'input']">{{ CarCode[4] }}</div><div:class="[index === 5 && showActive ? 'input_active' : '', 'input']">{{ CarCode[5] }}</div><div:class="[index === 6 && showActive ? 'input_active' : '', 'input']">{{ CarCode[6] }}</div><div:class="[index === 7 && showActive ? 'input_active' : '', 'input']">{{ CarCode[7] }}</div></div></div><uv-keyboardref="keyboard"mode="car"@change="change":showTips="false"@confirm="confirm"@backspace="backspace":autoChange="true":overlay="true":safeAreaInsetBottom="true":confirmText="'完成'"@changeCarInputMode="changeCarInputMode"@close="closeKey"><template v-slot:abc><text v-if="isABC">省份</text><text v-else>ABC</text></template></uv-keyboard></div>
</template><script>
export default {data() {return {CarCode: ["", "", "", "", "", "", "", ""],index: "",isABC: false,showActive: false,checkboxValue: ["true"],};},onShow() {this.getIndex();},mounted() {},methods: {closeKey() {this.showActive = false;},changeCarInputMode(e) {this.isABC = e;},getIndex() {let index = this.CarCode.indexOf("");if (index !== -1) {this.index = index;} else {this.index = 7;}this.$refs.keyboard.open();this.showActive = true;},change(e) {console.log("change", e, this.index);if (this.index <= 7) {this.CarCode[this.index] = e;this.index++;if (this.index > 7) {this.$refs.keyboard.close();this.showActive = false;this.index--;}}console.log("changeEnd", this.CarCode);},confirm() {console.log("confirm");},backspace() {console.log("backspace", this.index);if (this.index === 1) {this.$refs.keyboard.changeCarMode();}if (this.index >= 0) {if (this.CarCode[this.index] === "") {this.index--;this.CarCode[this.index] = "";} else {this.CarCode[this.index] = "";}if (this.index < 0) {this.index = 0;}}this.$forceUpdate();console.log("backspaceEnd", this.CarCode, this.index);},},
};
</script>

这篇关于uniapp、微信小程序车牌的录入的解决方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---