乐趣区

关于前端:APICloud-AVM框架-封装车牌号输入键盘组件

jiezi

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 组件库中，没有找到理论我的项目中须要的组件，能够本人尝试封装组件。

这是组件化开发的在线文档地址

退出移动版