四时宝库

最近看很多物流平台和一些相关汽车的软件对车牌键盘类型需求比较多。手机的原生键盘不支持这种功能，如果单纯地依赖第三方功能，不太适合公司个性化需求。手撸难度也不大，决定使用原生手撸车牌键盘。

看下效果

下面是交管App车牌键盘

vue3加ts手撸效果

使用 vue3 + typescript , 依赖第三方 vant 弹层 和 输入框。

贴上全部代码供大家交流

/* 页面内容 */
<template>
  <div class="card-code">    
    <!-- 区域简称input -->
    <van-field
        type="text"
        label="车牌简称" 
        v-model="area"
        placeholder="输入车牌号" 
        @focus="changeInput"
        readonly
    />
    <!-- 车牌键盘组件 -->
    <CarCodeKeybord 
        @selectArea="selectArea"
        ref="CarCodeKeybordRef" 
    />
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';
import CarCodeKeybord from '@/components/CarCodeKeybord.vue'
export default defineComponent({
  name: 'CardCode',
  components: {
      CarCodeKeybord
  },
  setup() {
    const area = ref<string>(''), // 区域名称
        CarCodeKeybordRef = ref<any>(null); // 组件ref

    // 输入更新
    const changeInput = () : void => {
        CarCodeKeybordRef.value.showDialog();
    }
    
    // 选择区域名称
    const selectArea = (code: string) : void => {
        area.value = code;
    }

    return {
        CarCodeKeybordRef,
        changeInput,
        selectArea,
        area
    }
  }
});
</script>

<template>
  <div class="code-popup">
    <!-- 弹层 -->
    <van-popup
      :show="popuShow"
      position="bottom"
      custom-style="height:40%"
      @close="onClose"
    >
      <!-- 简称 -->
      <div class="area-content" @click="selectArea">
        <div class="item">
          <span data-id="京">京</span><span data-id="沪">沪</span>
          <span data-id="浙">浙</span><span data-id="苏">苏</span>
          <span data-id="粤">粤</span><span data-id="鲁">鲁</span>
          <span data-id="晋">晋</span><span data-id="冀">冀</span>
        </div>
        <div class="item">
          <span data-id="豫">豫</span><span data-id="川">川</span>
          <span data-id="渝">渝</span><span data-id="辽">辽</span>
          <span data-id="吉">吉</span><span data-id="黑">黑</span>
          <span data-id="皖">皖</span><span data-id="鄂">鄂</span>
        </div>
        <div class="item">
          <span data-id="湘">湘</span><span data-id="赣">赣</span>
          <span data-id="闽">闽</span><span data-id="陕">陕</span>
          <span data-id="甘">甘</span><span data-id="宁">宁</span>
          <span data-id="蒙">蒙</span><span data-id="津">津</span>
        </div>
        <div class="item">
          <span data-id="贵">贵</span><span data-id="云">云</span>
          <span data-id="桂">桂</span><span data-id="琼">琼</span>
          <span data-id="青">青</span><span data-id="新">新</span>
          <span data-id="藏">藏</span><span style="visibility: hidden"></span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';
export default defineComponent({
  setup(props, { emit }) {
    const area = ref<string>(''), // 地区简称
      popuShow = ref<boolean>(false); // 是否显示dialog
      
    // 打开弹框
    const showDialog = () : void => {
      popuShow.value = true;
    }

    // 关闭弹框
    const onClose = () : void => {
      popuShow.value = false;
    }

    // 选择简称
    const selectArea = (e: any) : void => {  // 选择车牌地区 这里类型校验不能使用 MouseEvent
      if(e.target.dataset.id) { // 小程序使用 e.currentTarget
        area.value = e.target.dataset.id;
        emit('selectArea', area.value);
        popuShow.value = false; //关闭地区选择器
      }
    }
      
    return {
      area,
      onClose,
      popuShow,
      showDialog,
      selectArea
    }
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 /*地区选择器*/
  .area-content {
    height: 235px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height: 22px;
    box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.08);
    margin-top: 4px;
    box-sizing: border-box;
  }

  .area-content .item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .area-content .item > span {
    width: 30px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(255,255,255,1);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
    border-radius: 5px;
  }
</style>

如果想了解更多的web小程序开发知识, 请点赞收藏加关注啊。手撸不易！持续更新...