APICloud AVM 框架 封装车牌号输入键盘组件
作者：APICloud
- 2022 年 8 月 29 日 北京
本文字数：4897 字
阅读完需：约 16 分钟
AVM（Application-View-Model）前端组件化开发模式基于标准 Web Components 组件化思想，提供包含虚拟 DOM 和 Runtime 的编程框架avm.js 以及多端统一编译工具，完全兼容 Web Components 标准，同时兼容 Vue 和 React 语法糖编写代码，编译工具将 Vue 和 React 相关语法糖编译转换为 avm.js 代码。
基于标准 Web Components 组件化思想，兼容 Vue / React 语法特性，通过一次编码，分别编译为 App、小程序代码，实现多端开发。
组件功能介绍
封装了车牌号输入键盘，支持燃油汽车、新能源车辆、教练车、挂车、警车 5 种模式。针对输入的车牌号进行了正则验证。
如有其他类型的车牌需要输入，可在此基础上进行添加即可，主要是控制号牌长度和一些固定的字。
示例展示
组件开发
组件文件
car-num-keyboard.stml
<template> <view class={"keyboard-box-bg" + (transition?' keyboard-box-bg-transition':'')}> <view style="height:100%;"></view> <view class={"keyboard-box" + (transition?' keyboard-box-transition':'')}> <view class="header"> <text @click="cancelLicense">取消</text> <text>{licenseType}</text> <text @click="successLicense">完成</text> </view> <view class="license-number"> <view class="license-number-item" v-for="item in licenseNumber"> <text>{item}</text> </view> </view> <view class="keyboard"> <view class="keyboard-item" v-for="item in provinces" data-value={item} @click="setNumber" v-show="!isProvince"> <text class="keyboard-item-title">{item}</text> </view> <view class="keyboard-item-key" v-for="item in licenseKey" data-value={item} @click="setNumberKey" v-show="isProvince"> <text class="keyboard-item-title">{item}</text> </view> <image class="keyboard-item-ico" src='../../image/key-back.png' mode="widthFix" @click="delLicenseNUmber"></image> </view> </view> <safe-area></safe-area> </view></template><script> export default { name: 'car-num-keyboard', installed(){ if(this.props.mode=='new'){ this.data.licenseNumber=['','','','','','','','']; this.data.licenseType='新能源汽车号牌'; this.data.numberLength = 8; } else if(this.props.mode=='trailer'){ this.data.licenseNumber=['','','','','','','挂']; this.data.licenseType='挂车号牌'; this.data.numberLength = 6; } else if(this.props.mode=='instructional'){ this.data.licenseNumber=['','','','','','','学']; this.data.licenseType='挂车号牌'; this.data.numberLength = 6; } else if(this.props.mode=='police'){ this.data.licenseNumber=['','','','','','','警']; this.data.licenseType='警车号牌'; this.data.numberLength = 6; } else{ this.data.licenseNumber = ['', '', '', '', '', '', '']; this.data.licenseType='燃油汽车号牌'; this.data.numberLength = 7; } this.data.keyBoards = this.data.licenseKey; setTimeout(()=>{ this.data.transition = true; }, 50); }, props:{ mode:String }, data() { return{ provinces: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁', '新'], licenseNumber: [], licenseKey: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'], keyBoards: [], isProvince: false, licenseNumberIndex: 0, licenseType: '燃油汽车号牌', mode:'', numberLength:7, transition: false } }, methods: { setNumber(e) { if (this.data.licenseNumberIndex == 0) { this.data.licenseNumber[0] = e.dataset.value; this.data.licenseNumberIndex += 1; this.data.isProvince = true; } }, setNumberKey(e) { if (this.data.licenseNumberIndex < this.data.numberLength) { this.data.licenseNumber[this.data.licenseNumberIndex] = e.dataset.value; this.data.licenseNumberIndex += 1; } }, delLicenseNUmber() { this.data.licenseNumberIndex -= 1; if (this.data.licenseNumberIndex == 0) { this.data.isProvince = false; } this.data.licenseNumber[this.data.licenseNumberIndex] = ''; }, cancelLicense() { this.fire('cancal',''); }, successLicense() { let licenseNumber = this.data.licenseNumber.join(''); //校验车牌号 const carReg=/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/; if(!carReg.test(licenseNumber)){ api.confirm({ title: '提醒', msg: '您输入的车牌号可能无效，是否继续使用？', buttons: ['确定', '取消'] }, (ret, err) => { // var index = ret.buttonIndex; if(ret.buttonIndex==1){ this.fire('getNum',{carNum:licenseNumber,mode:this.props.mode}); } }); } else{ this.fire('getNum',{carNum:licenseNumber,mode:this.props.mode}); } } } }</script><style> .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; }</style>复制代码
组件使用说明
本组件是基于 AVM.js 开发的多端组件，通常同时适配 Android、iOS、小程序、H5 , 具体支持情况还要看每个组件的说明文档。
首先需要登录开发平台，http://www.apicloud.com。 通过控制平台右上方的模块 Store 进入，然后选择 AVM 组件。
找到对应模块进入，也可通过搜索栏，通过组件名称关键字进行检索。
进入模块详情，点击立即下载下载完整的组件安装包。
组件压缩包的文件目录如下
也可通过查看模块文档 来了解模块的具体参数，引用的原生模块，注意事项等。
具体在项目中的使用步骤是，第一步将压缩文件中的 car-num-keyboard.stml 文件拷贝到项目的 components 目录，通过阅读 readme.md 文档和查看 demo 示例文件 demo-car-num-keyboard.stml 在需要开发的 stml 文件中，引入组件文件，完成页面的开发。
在调用键盘的时候，是通过 v-if 进行键盘的显示和隐藏，v-if false 的情况会销毁元素，所以需要传递的动态值，必须要在元素重新创建之前进行赋值操作。如下图所示，先后顺序很重要。
demo-car-num-keyboard.stml
<template> <view class="page"> <safe-area></safe-area> <view class="car-box" data-mode="oil" @click="openCarNumKeyboard"> <text class="car-label">燃油汽车号牌</text> <text class="car-num">{carNumber}</text> </view> <view class="car-box" data-mode="new" @click="openCarNumKeyboard"> <text class="car-label">新能源汽车号牌</text> <text class="car-num">{carNumber1}</text> </view> <view class="car-box" data-mode="trailer" @click="openCarNumKeyboard"> <text class="car-label">挂车号牌</text> <text class="car-num">{carNumber2}</text> </view> <view class="car-box" data-mode="instructional" @click="openCarNumKeyboard"> <text class="car-label">教练车号牌</text> <text class="car-num">{carNumber3}</text> </view> <view class="car-box" data-mode="police" @click="openCarNumKeyboard"> <text class="car-label">警车号牌</text> <text class="car-num">{carNumber4}</text> </view> <car-num-keyboard v-bind:mode={mode} v-if="isSetCarNum" oncancal="claseKeyboard" ongetNum="getCarNum"></car-num-keyboard> </view></template><script> import '../../components/car-num-keyboard.stml' export default { name: 'license-number', apiready(){ }, data() { return{ carNumber:'', carNumber1:'', carNumber2:'', carNumber3:'', carNumber4:'', isSetCarNum:false, mode:'' } }, methods: { openCarNumKeyboard(e){ this.data.mode = e.dataset.mode; this.data.isSetCarNum = true;//传递动态值 先传值初始化元素 }, claseKeyboard(e){ this.data.isSetCarNum = false; this.data.mode = ''; }, getCarNum(e){ this.data.isSetCarNum = false; if(e.detail.mode=='new'){ this.data.carNumber1=e.detail.carNum; } else if(e.detail.mode=='trailer'){ this.data.carNumber2=e.detail.carNum; } else if(e.detail.mode=='instructional'){ this.data.carNumber3=e.detail.carNum; } else if(e.detail.mode=='police'){ this.data.carNumber4=e.detail.carNum; } else{ this.data.carNumber = e.detail.carNum; } } } }</script><style> .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; }</style>复制代码
如果在 AVM 组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。
划线
评论
复制
发布于: 刚刚阅读数: 3
APICloud
关注
一次编码多端运行，移动应用低代码开发平台 2020.12.22 加入
用友YonBuilder移动端低代码开发平台，快速构建高性能多端应用
评论