APICloud AVM框架 封装车牌号输入键盘组件实例分享。封装了车牌号输入键盘，支持燃油汽车、新能源车辆、教练车、挂车、警车5种模式。针对输入的车牌号进行了正则验证。
\
如有其他类型的车牌需要输入，可在此基础上进行添加即可，主要是控制号牌长度和一些固定的字。
\
组件引用
import '../../components/car-num-keyboard.stml'
组件使用
组件文件
car-num-keyboard.stml
\
.keyboard-box-bg{ position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.1); transition-property: background-color; transition-duration: 0.3s; } .keyboard-box-bg-transition{ background-color: rgba(0,0,0,0.4); } .keyboard-box{ align-items: center; position: absolute; bottom: 0; width: 100%; background-color: white; box-sizing: border-box; transform: translateY(100%); transition-property: transform; transition-duration: 0.3s; } .keyboard-box-transition{ transform: translateY(0); } .header { background-color: #dddddd; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 8px 15px; width: 100%; } .license-number { flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 30px; background-color: #ffffff; width: 100%; } .license-number-item { width: 10%; justify-content: center; align-items: center; border: 0.5px solid #cccccc; border-radius: 5px; padding: 5px 0; min-height: 35px; } .keyboard { background-color: #ffffff; width: 100%; } .keyboard { flex-flow: row wrap; align-items: center; padding: 0 10px 10px 10px; } .keyboard-item { width: 12.5%; justify-content: center; align-items: center; } .keyboard-item-key { width: 10%; justify-content: center; align-items: center; } .keyboard-item-title { border: 0.5px solid #ccc; border-radius: 5px; padding: 5px 10px; margin: 10px 0; } .keyboard-item-ico { width: 30px; margin-left: 10px; }\
示例代码
.page { height: 100%; background-color: #ffffff; } .car-box{ margin: 10px; padding-bottom: 5px; border-bottom: 0.5px solid #cccccc; } .car-label{ font-size: 15px; color: #666666; } .car-num{ font-size: 20px; min-height: 20px; }\
注意点：
\
在调用键盘的时候，是通过v-if 进行键盘的显示和隐藏，v-if false的情况会销毁元素，所以需要传递的动态值，必须要在元素重新创建之前进行赋值操作。如下图所示，先后顺序很重要。
\
