概述

一個小組件，用于方便用戶輸入車牌號碼

詳細

概述

有時候我們開發(fā)過程中會遇到需要用戶輸入車牌號的情況，讓客戶通過自帶鍵盤輸入，體驗不好且容易出錯，例如車牌號是不能輸入O和I的，因此需要有一個自定義的鍵盤，讓客戶輸入正確的車牌號

詳細

效果展示

實現(xiàn)思路

1 布局設(shè)計

    讓輸入的框彈出，方便輸入
    <view wx:for="{{inputList}}" wx:key="*this" 
        class="{{item.type}} {{index === 1 || index === 8 ? 'border_right':''}} {{index === input_active_index ? 'input_active' : ''}}"
        bindtap="tapInput" data-index="{{index}}" data-item="{{item}}">
        {{item.value || ''}}
        </view>
        <view class="backward" bindtap="tapDel">
          <image class="icon_backward" src="/img/backward.svg"/>
        </view>
    css：
    .main {
      background: rgba(0, 0, 0, 0.6);
      height: 100vh;
      z-index: 999;
      position: fixed;
      top: 0px;
      width: 100%;
    }
    .main_panel {
      position: absolute;
      width: 100%;
      bottom: 0px;
    }

2 數(shù)據(jù)設(shè)計

把合法輸入的字符，列出來

    provinceList: '京滬粵津浙蘇湘渝云豫皖陜桂新青瓊閩蒙遼寧魯晉吉翼黑甘鄂贛貴川藏使'.split(''),
        numberList: '0123456789ABCDEFGHJKLMNPQRSTUVWXYZ掛港澳警領(lǐng)學(xué)'.split(''),

?3 使用組件

    在json文件中引用
    {
      "usingComponents": {
        "carnum_input": "/component/carnumber_input/carnumber_input"
      }
    }
    定義好監(jiān)聽車牌輸入，輸入框關(guān)閉的事件，即可獲取輸入內(nèi)容
    <carnum_input 
        show="{{showCarnumInput}}" 
        bind:getCarNumber="getCarNumber"
        bind:closeCarNumberInput="closeCarNumberInput"/>

工具類介紹

viewtools.wxs 主要作用是補0，讓界面好看些，如果有需要可以在這里改邏輯實現(xiàn)

    module.exports = {
      // 把車牌字符串轉(zhuǎn)為數(shù)組
      getCarNumberList: function (carNum) {
        var ret = '  ?     ';
        if (!carNum || carNum.trim() === '' || carNum === undefined) return ret;
        var supplementNumber = 9 - carNum.trim().length;
        for(var i = 0; i < supplementNumber; i++) {
          carNum+=' '
        }
        ret = carNum;
        return ret;
      }
    }

目錄結(jié)構(gòu)

文章來源地址http://www.zghlxwxcb.cn/news/detail-675947.html

到了這里，關(guān)于微信小程序 車牌號輸入組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！