当前位置：首页 > news >正文

微信小程序原生车牌输入器

news 2025/11/4 8:45:19

效果图
使用得ui库地址
wxml代码

<t-popupvisible="{{customVisible}}"close-on-overlay-click="{{false}}"bind:visible-change="closePopup"placement="bottom"
><view class="block"><view class="header"><view class="btns"><t-button t-class="c-btn" bind:tap="closePopup" size="small">取消</t-button><t-buttont-class="c-btn"theme="primary"size="small"bind:tap="confirm">确定</t-button></view><view class="plates"><view class="txt">新能源</view><viewclass="plate-item {{plate.length ===index?'plate-item-active':''}}"wx:for="{{plateLength}}"wx:key="index"><view class="plate-value">{{plate[index]}}</view><view class="item__cursor" wx:if="{{ plate.length ===index }}"></view></view></view></view><view class="plate-btn"><!-- 省份的 --><view hidden="{{provicesOrNumber !== 'provice'}}"><view class="plate-province"><view class="line"><viewclass="item"hover-class="item-hover"hover-stay-time="180"wx:for="{{chineseProvinces[0]}}"bind:tap="inputPlate"data-value="{{item}}"wx:key="index">{{item}}</view></view><view class="line"><viewclass="item"hover-class="item-hover"hover-stay-time="180"wx:for="{{chineseProvinces[1]}}"bind:tap="inputPlate"data-value="{{item}}"wx:key="index">{{item}}</view></view><view class="line"><viewclass="item"hover-class="item-hover"hover-stay-time="180"wx:for="{{chineseProvinces[2]}}"bind:tap="inputPlate"data-value="{{item}}"wx:key="index">{{item}}</view></view><view class="line"><viewclass="item abc"hover-class="item-hover"hover-stay-time="180"bind:tap="toggleNumber">ABC</view><viewclass="item"hover-class="item-hover"hover-stay-time="180"wx:for="{{chineseProvinces[3]}}"bind:tap="inputPlate"data-value="{{item}}"wx:key="index">{{item}}</view><viewclass="item close"hover-class="item-hover"hover-stay-time="180"wx:key="index"bind:tap="delPlate"><t-icon name="close" color="#3d3d3d" size="24"></t-icon></view></view></view></view><!-- 数字和字母 --><view hidden="{{provicesOrNumber !== 'number'}}"><view class="plate-province plate-number"><view class="line"><viewclass="item"hover-class="item-hover"hover-stay-time="180"wx:for="{{numberAbcText[0]}}"bind:tap="inputPlate"data-value="{{item}}"wx:key="index">{{item}}</view></view><view class="line"><viewclass="item"hover-class="item-hover"hover-stay-time="180"wx:for="{{numberAbcText[1]}}"bind:tap="inputPlate"data-value="{{item}}"wx:key="index">{{item}}</view></view><view class="line"><viewclass="item"hover-class="item-hover"hover-stay-time="180"wx:for="{{numberAbcText[2]}}"bind:tap="inputPlate"data-value="{{item}}"wx:key="index">{{item}}</view></view><view class="line"><viewclass="item abc"hover-class="item-hover"hover-stay-time="180"bind:tap="toggleProvice">返回</view><viewclass="item"hover-class="item-hover"hover-stay-time="180"wx:for="{{numberAbcText[3]}}"bind:tap="inputPlate"data-value="{{item}}"wx:key="index">{{item}}</view><viewclass="item close"hover-class="item-hover"hover-stay-time="180"wx:key="index"bind:tap="delPlate"><t-icon name="close" color="#3d3d3d" size="24"></t-icon></view></view></view></view></view></view>
</t-popup>

less代码(微信小程序配置less代码地址)

.block {width: 100vw;background: #fff;border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;
}.header {box-sizing: border-box;position: relative;border-width: 0px 0px 1px 0px;border-style: solid;border-color: #ededed;padding: 24rpx;.btns {width: 100%;display: flex;justify-content: space-between;gap: 0 48rpx;.c-btn {width: 0;flex: 1;margin: 0;}}.plates {position: relative;width: 100%;position: relative;box-sizing: border-box;display: flex;justify-content: space-between;padding: 0 10rpx;margin-top: 50rpx;.plate-item {box-sizing: border-box;position: relative;width: 72rpx;height: 84rpx;color: #262626;font-size: 72rpx;border-radius: 2rpx;background: #f7f7f7;display: flex;align-items: center;justify-content: center;overflow: hidden;.plate-value {font-size: 32rpx;color: #0052d9;}.item__cursor {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 1px;height: 40%;animation: 1.5s uv-cursor-flicker infinite;background-color: #0052d9;}}.plate-item-active {border: 1px solid #0052d9;}.txt {position: absolute;top: -40rpx;right: 15rpx;line-height: 28rpx;font-size: 20rpx;color: #0052d9;}}
}.plate-btn {box-sizing: border-box;background-color: #f7f7f7;padding: 12rpx 12rpx;.plate-province {display: flex;flex-direction: column;gap: 10rpx 0;.line {display: flex;align-items: center;gap: 0 10rpx;}.item {width: 68rpx;height: 80rpx;font-size: 28rpx;color: #3d3d3d;border-radius: 8rpx;background: #fff;display: flex;align-items: center;justify-content: center;}.item-hover {background-color: #f0f0f0; /* 点击时的背景色 */}.abc {width: 90rpx;}.close {width: 0;flex: 1;}}
}@keyframes uv-cursor-flicker {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}
}

js文件

import { deepClone } from "@/utils/util";
const app = getApp();
const chineseProvinces = [["京", "津", "沪", "渝", "冀", "豫", "云", "辽", "黑", "湘"],["皖", "鲁", "新", "苏", "浙", "赣", "鄂", "桂", "甘", "晋"],["蒙", "陕", "吉", "闽", "贵", "粤", "青", "藏", "川", "宁"],["琼", "使", "领", "学", "警", "港", "澳"],
];const numberAbcText = [["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],["A", "S", "D", "F", "G", "H", "J", "K", "L"],["Z", "X", "C", "V", "B", "N", "M"],
];Component({// 虚拟化组件节点options: {virtualHost: true,},externalClasses: [],properties: {propPlate: {type: [String, Array],value: "",},visible: {type: Boolean,value: false,},},observers: {visible: function () {this.setData({customVisible: this.data.visible,});},propPlate: function () {let propPlate = deepClone(this.data.propPlate);if (!Array.isArray(propPlate)) {propPlate = propPlate.split("");}this.setData({plate: propPlate,});},},data: {customVisible: false, // popup 状态plateLength: 8, // 车牌的长度  固定是8 最后一位是新能源plate: [], // 车牌chineseProvinces,numberAbcText,provicesOrNumber: "provice", // 省份(provice) / 字母数字(number)},lifetimes: {},methods: {// 关闭popupclosePopup() {this.setData({customVisible: !this.data.customVisible,});this.triggerEvent("change", false);},// 确定confirm() {this.triggerEvent("backData", {plate: deepClone(this.data.plate),});this.closePopup();},// 选择车牌 省份/数字inputPlate(e) {let value = e.currentTarget.dataset.value;if (this.data.plate.length >= 8) {return;}let plate = this.data.plate;plate.push(value);this.setData({plate,});},// 删除车牌delPlate() {let plate = this.data.plate;plate.pop();this.setData({plate,});},toggleNumber() {this.setData({provicesOrNumber: "number",});},toggleProvice() {this.setData({provicesOrNumber: "provice",});},},
});

json文件

{"component": true,"usingComponents": {"t-popup": "tdesign-miniprogram/popup/popup","t-button": "tdesign-miniprogram/button/button","t-icon": "tdesign-miniprogram/icon/icon"}
}

6.使用

<view>车牌:{{licensePlate}}</view>
<button bind:tap="openPlateLicense">点击显示车牌输入器</button>
<plate-licenseprop-plate="{{licensePlate}}"visible="{{plateLicenseVisible}}"bind:change="closePlateLicence"bind:backData="backPlateLicense" />
// js方法openPlateLicense() {this.setData({plateLicenseVisible: true,});},closePlateLicence() {this.setData({plateLicenseVisible: false,});},backPlateLicense(e) {let plate = e.detail.plate;this.setData({licensePlate: plate.join(""),});},