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

0. 效果图
   

1. 使用得ui库 地址,使用到得组件popup,button,icon,其他都是微信原生标签

2. wxml代码

<t-popup
  visible="{{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-button
          t-class="c-btn"
          theme="primary"
          size="small"
          bind:tap="confirm"
          >确定</t-button
        >
      </view>
      <view class="plates">
        <view class="txt">新能源</view>
        <view
          class="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">
            <view
              class="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">
            <view
              class="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">
            <view
              class="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">
            <view
              class="item abc"
              hover-class="item-hover"
              hover-stay-time="180"
              bind:tap="toggleNumber"
            >
              ABC
            </view>
            <view
              class="item"
              hover-class="item-hover"
              hover-stay-time="180"
              wx:for="{{chineseProvinces[3]}}"
              bind:tap="inputPlate"
              data-value="{{item}}"
              wx:key="index"
            >
              {{item}}
            </view>
            <view
              class="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">
            <view
              class="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">
            <view
              class="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">
            <view
              class="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">
            <view
              class="item abc"
              hover-class="item-hover"
              hover-stay-time="180"
              bind:tap="toggleProvice"
            >
              返回
            </view>
            <view
              class="item"
              hover-class="item-hover"
              hover-stay-time="180"
              wx:for="{{numberAbcText[3]}}"
              bind:tap="inputPlate"
              data-value="{{item}}"
              wx:key="index"
            >
              {{item}}
            </view>
            <view
              class="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>

3. 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;
  }
}

4. 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: {
    // 关闭popup
    closePopup() {
      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",
      });
    },
  },
});

5. 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-license
  prop-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(""),
    });
  },