Vue2移动端（H5项目）项目封装车牌选择组件

一、最终效果

二、参数配置

1、代码示例：

<t-keyword:isShow="isShow"@ok="isShow=false"@cancel="isShow=false"@inputchange="inputchange":finalValue="trailerNo"/>

2、配置参数（TKeyword Attributes）的属性

参数	说明	类型	默认值
isShow	是否弹起键盘	Boolean	false
cancelColor	取消字体颜色	String	#2072ED
confirmColor	确认背景颜色	String	#2072ED
isShowMask	是否显示遮罩	Boolean	true
isClickMask	是否点击遮罩关闭键盘	Boolean	true
maxLength	最大输入长度	Number	8
finalValue	最终显示的值 (下拉框顶部)	String	-

3、events 事件

事件名	说明	返回值
inputchange	选中车牌键盘	选中的值和最大输入长度
cancel	点击取消按钮时触发	-
ok	点击确定按钮时触发	-
delete	点击键盘清除键，	-

三、具体页面使用

<template><div class="start_judging_scrap_steel"><van-fieldv-model="trailerNo"centerclearablelabel="车牌号"@focus="isShow=true"placeholder="请输入车牌号"/><t-keyword:isShow="isShow"@ok="isShow=false"@cancel="isShow=false"@inputchange="inputchange":finalValue="trailerNo"/></div>
</template>
<script>
export default {name: 'startJudgingScrapSteel',data() {return {isShow: false,trailerNo: '', // 车牌号}},methods: {// 输入车牌号inputchange(val, maxLength) {if (this.trailerNo.length >= maxLength && val !== 'delete') {return false}if (val === 'delete') {this.trailerNo = this.trailerNo.slice(0, this.trailerNo.length - 1)} else {this.trailerNo += val.toUpperCase()}},},
};
</script>

三、源码

<template><div class="panel-wrap" v-if="isShow" data-value="exit" @click="colse_da"><div class="mask_layer" v-if="isShowMask"></div><div class="vehicle-panel" :style="{background:backgroundColor}" @click.stop><div class="topItem"><div class="check" @click.stop="check">中/英切换</div><div class="contentShow" v-if="finalValue">最终值：{{finalValue}}</div><div class="exit" :style="{color:cancelColor}" @click.stop="vehicleTap('cancel')">取消</div></div><!--省份简写键盘--><div v-if="keyBoardType === 1"><div class="vehicle-panel-row_province"><divclass="vehicle-panel-row-button":style="{border:buttonBorder}"v-for="(item,idx) in keyVehicle1"@click.stop="vehicleTap(item)":key="idx+item">{{item}}</div></div><div class="vehicle-panel-row_province"><divclass="vehicle-panel-row-button":style="{border:buttonBorder}"v-for="(item,idx) in keyVehicle2"@click.stop="vehicleTap(item)":key="idx+item">{{item}}</div></div><div class="vehicle-panel-row_province"><divclass="vehicle-panel-row-button":style="{border:buttonBorder}"v-for="(item,idx) in keyVehicle3"@click.stop="vehicleTap(item)":key="idx+item">{{item}}</div></div><div class="vehicle-panel-row_province"><divclass="vehicle-panel-row-button vehicle-panel-row-button-last"@click.stop="vehicleTap(item)"v-for="(item,idx) in keyVehicle4":style="{border:buttonBorder}":key="idx+item">{{item}}</div><div:style="{border:buttonBorder}"class="vehicle-panel-row-button vehicle-panel-row-button-img"><van-iconclass="vehicle-en-button-delete"name="close"@click.stop="vehicleTap('delete')"/></div></div></div><!--英文键盘  --><div v-else><div class="vehicle-panel-row"><divclass="vehicle-panel-row-button vehicle-panel-row-button-number"@click.stop="vehicleTap(item)"v-for="(item,idx) in keyNumber":style="{border:buttonBorder}":key="item+idx">{{item}}</div></div><div class="vehicle-panel-row"><divclass="vehicle-panel-row-button":style="{border:buttonBorder}"v-for="(item,idx) in keyEnInput1"@click.stop="vehicleTap(item)":key="idx+item">{{item}}</div></div><div class="vehicle-panel-row"><divclass="vehicle-panel-row-button":style="{border:buttonBorder}"v-for="(item,idx) in keyEnInput2"@click.stop="vehicleTap(item)":key="idx+item">{{item}}</div><div:style="{border:buttonBorder}"class="vehicle-panel-row-button vehicle-panel-row-button-img"><van-iconclass="vehicle-en-button-delete"name="close"@click.stop="vehicleTap('delete')"/></div></div><div class="vehicle-panel-row-last"><divclass="vehicle-panel-row-button vehicle-panel-row-button-last"@click.stop="vehicleTap(item)":style="{border:buttonBorder}"v-for="(item,idx) in keyEnInput3":key="idx+item">{{item}}</div><div:style="{border:buttonBorder,backgroundColor:confirmColor}"class="vehicle-panel-row-button vehicle-panel-ok"@click.stop="vehicleTap('ok')">确定</div></div></div></div></div>
</template>
<script>
import variables from '@/assets/css/variables.scss'
export default {name: 'TKeyword',props: {// 是否弹起键盘isShow: {type: Boolean,default: false},// 取消字体颜色cancelColor: {type: String,default: `#2072ED`},// 是否显示遮罩isShowMask: {type: Boolean,default: true},// 是否点击遮罩关闭键盘isClickMask: {type: Boolean,default: true},// 最大输入长度maxLength: {type: Number,default: 8},// 确认背景颜色confirmColor: {type: String,default: `#2072ED`},// 最终显示的值finalValue: {type: String}},data() {return {keyVehicle1: ['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],keyVehicle2: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],keyVehicle3: ['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'],keyVehicle4: ['陕', '甘', '青', '宁', '新', 'W'],keyNumber: '1234567890',keyEnInput1: 'QWERTYUP', // 没有IOkeyEnInput2: 'ASDFGHJKL',keyEnInput3: 'ZXCVBNM',backgroundColor: '#fff',keyBoardType: 1,buttonBorder: '1px solid #ccc'}},methods: {vehicleTap(event) {console.log(event)if (/^[\u4e00-\u9fa5]/.test(event)) {this.keyBoardType = 2}switch (event) {case 'delete':this.$emit('delete')this.$emit('inputchange', event, this.maxLength)breakcase 'ok':this.$emit('ok')breakcase 'cancel':this.$emit('cancel')breakdefault:this.$emit('inputchange', event, this.maxLength)}},// 点击遮罩关闭键盘mask-layercolse_da() {if (!this.isClickMask) {return}this.$emit('cancel')},check() {if (this.keyBoardType === 1) {this.keyBoardType = 2} else if (this.keyBoardType === 2) {this.keyBoardType = 1}}}
}
</script><style lang="scss" scoped>
:host {width: 100%;
}.panel-wrap {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9999;.mask_layer {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);}.vehicle-panel {width: 100%;position: fixed;bottom: 0;display: flex;flex-direction: column;justify-content: center;z-index: 1000;background: #fff;padding-bottom: 10px;}.vehicle-panel-row_province {display: flex;justify-content: center;align-items: center;}.vehicle-panel-row {display: flex;justify-content: space-between;align-items: center;}.vehicle-panel-row-last {display: flex;justify-content: space-between;align-items: center;}.vehicle-panel-row-button {background-color: #fff;margin: 0 1vw;margin-top: 8px;width: 8.8vw;height: 40px;border-radius: 5px;display: flex;justify-content: center;align-items: center;}.vehicle-panel-row-button-number {background-color: #eee;}.vehicle-panel-row-button-last {width: 8.8vw;height: 40px;display: flex;justify-content: center;align-items: center;}.vehicle-hover {background-color: #ccc;}.vehicle-panel-row-button-img {display: flex;justify-content: center;align-items: center;}.vehicle-en-button-delete {width: 8.8vw;height: 40px;display: flex;justify-content: center;align-items: center;}.vehicle-panel-ok {background-color: #355db4;color: #fff;width: 50px;height: 40px;font-size: 16px;display: flex;justify-content: center;align-items: center;}.topItem {display: flex;justify-content: space-between;align-items: center;height: 40px;font-size: 16px;border: 1px solid #ebedf0;.check {margin-left: 10px;color: #355db4;flex: 0.5;}.exit {margin-left: 0;margin-right: 10px;flex: 0.5;text-align: right;}.contentShow {text-align: center;flex: 1;}}
}
</style>

相关文章

基于ElementUi再次封装基础组件文档

---

基于ant-design-vue再次封装基础组件文档

---

vue3+ts基于Element-plus再次封装基础组件文档