vue +vant 车牌号输入

最近写了一个预进出场的需求

1.HTML

<template><div class="keyboard"><div class="numberCover"><div class="input-box" @click="clickShowKeyboard"><li>{{ first }}</li><li>{{ numArr[0] }}</li><li>{{ numArr[1] }}</li><li>{{ numArr[2] }}</li><li>{{ numArr[3] }}</li><li>{{ numArr[4] }}</li><li>{{ numArr[5] }}</li><li v-show="!newNumberFlag">{{ numArr[6] }}</li></div><div class="button"><van-button type="primary" color="#5264E7" class="bottom-button" @click="changeNumber" v-show="!newNumberFlag">新能源</van-button><van-button type="primary" color="#5264E7" class="bottom-button" @click="changeNumber" v-show="newNumberFlag">普</van-button></div></div><!-- 选择车牌号 首个汉字键盘 弹出层 --><div class="plate_number"><van-popup v-model="show_chinese" position="bottom" :overlay="true" overlay-class="displayNone"><div class="plate_chinese_box"><!-- 点击对应的汉字，进行输入 --><van-button size="small" v-for="(item, index) in ChineseList" :key="item.id" @click="checkChinese(index)">{{ item.name }}</van-button><div class="close-box" @click.stop="close_keyboard"><div>╳</div><li></li></div></div></van-popup></div><!-- 英文 数字 键盘 --><div class="allBoard"><van-popup v-model="show_allBoard" position="bottom" :overlay="true" overlay-class="displayNone"><div class="plate_number_box"><!-- 点击对应的字母或数字，进行输入 --><van-button size="small" v-for="(item, index) in English_Number" :key="item.id"@click="checkEnglish_num(index)">{{ item.name }}</van-button><div class="close-box" @click.stop="close_keyboard"><div>╳</div><li></li></div></div></van-popup></div></div>
</template>
<script src="./index.js">
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import './index.scss';
</style>
<style lang="scss">
.displayNone {display: none !important;
}
</style>

2.js

export default {data() {return {showKeyboard: true,    //车牌号输入框是否聚焦show_chinese:false,     //是否显示汉字键盘show_allBoard:false,     //是否显示英文数字键盘ChineseList:[{name:'京',id:1},{name:'津',id:2},{name:'冀',id:3},{name:'晋',id:4},{name:'蒙',id:5},{name:'辽',id:6},{name:'吉',id:7},{name:'黑',id:8},{name:'沪',id:9},{name:'苏',id:10},{name:'浙',id:11},{name:'皖',id:12},{name:'闽',id:13},{name:'赣',id:14},{name:'鲁',id:15},{name:'豫',id:16},{name:'鄂',id:17},{name:'湘',id:18},{name:'粤',id:19},{name:'桂',id:20},{name:'琼',id:21},{name:'渝',id:22},{name:'川',id:23},{name:'贵',id:24},{name:'云',id:25},{name:'藏',id:26},{name:'陕',id:27},{name:'甘',id:28},{name:'青',id:29},{name:'宁',id:30},{name:'新',id:31},{name:'←',id:99},],English_Number:[{name:'1',id:28},{name:'2',id:29},{name:'3',id:30},{name:'4',id:31},{name:'5',id:32},{name:'6',id:33},{name:'7',id:34},{name:'8',id:35},{name:'9',id:36},{name:'0',id:37},{name:'Q',id:38},{name:'W',id:39},{name:'E',id:40},{name:'R',id:41},{name:'T',id:42},{name:'Y',id:43},{name:'U',id:44},{name:'I',id:45},{name:'O',id:46},{name:'P',id:47},{name:'A',id:48},{name:'S',id:49},{name:'D',id:50},{name:'F',id:51},{name:'G',id:52},{name:'H',id:53},{name:'J',id:54},{name:'K',id:55},{name:'L',id:56},{name:'Z',id:57},{name:'X',id:58},{name:'C',id:59},{name:'V',id:60},{name:'B',id:61},{name:'N',id:62},{name:'M',id:63},{name:'←',id:99},],plate_number: '',   //车牌号first:'豫',numArr:[],newNumberFlag:false//false是普通车牌号，true为新能源}},computed: {},watch:{plate_number(newVal,oldVal){console.log(newVal);},numArr(newVal,oldVal){console.log(newVal);},first(newVal,oldVal){console.log(newVal);}},methods: {// 唤起键盘clickShowKeyboard(){if(!this.first){this.show_chinese = true;}else{this.show_chinese = false;this.show_allBoard = true;}},// 选择车牌号前面的汉字 checkChinese(index){// debugger// 如果点击删除键，删除第一个格的内容if(this.ChineseList[index].id == 99){this.first = ''}else{// 把选中的字赋值给第一个格，并且切换键盘this.first = this.ChineseList[index].name;this.show_chinese = false;this.show_allBoard = true;}},// 选择车牌号后面的数字和字母 checkEnglish_num(index){// 如果点击删除键，删除 numArr 的最后一个值if(this.English_Number[index].id == 99){this.numArr.pop()// 如果 numArr 里面被删的没有值了，切换键盘if(this.numArr.length == 0){this.show_chinese = true;this.show_allBoard = false;}}else{// 把选中的值 push 到 numArr 内this.numArr.push(this.English_Number[index].name)// 如果 numArr 中的值超过 7 个（车牌号的最大位数），删除最后一个if(this.numArr.length > 7){this.numArr.pop()}}},changeNumber(){//点击新能源this.newNumberFlag=!this.newNumberFlagif(this.newNumberFlag&&this.numArr.length > 6){this.numArr.pop()}},// 关闭虚拟键盘close_keyboard(){this.show_chinese = false;this.show_allBoard = false;}},created () { // alert(1)},
}

3.css

.keyboard {// width: 100%;width: calc(100% - 30px);// position: absolute;// margin-left: 15px;// margin-top: 15px;margin: 15px auto;
}.numberCover {display: flex;.button {margin-left: 10px;width: 18%;.van-button {width: 100%;// margin-right: 15px;// margin-top: 15px;// margin-left: 10px;height: 35px;}}.van-button--normal {padding: 0;}}// 车牌号 & 虚拟键盘
.input-box {width: 80%;height: 35px;margin: auto;background: rgba(255, 255, 255, 1);box-shadow: 0px 6px 8px 0px rgba(96, 100, 112, 0.1);// border-radius: .4rem;border: 1px solid rgba(206, 208, 210, 1);// margin: 0 auto 2rem;display: flex;justify-content: center;li {flex: 1;border-right: 1px solid rgba(206, 208, 210, 1);box-sizing: border-box;margin-left: -1px;font-size: 16px;display: flex;align-items: center;justify-content: center;color: #323233;}li:last-child {border: none;}}.class-close-box {width: 20px;height: 20px;position: absolute;right: 0.5rem;top: -40px;
}.class-close-box-div {width: 20px;height: 20px;font-size: 13;line-height: 20px;margin: auto;text-align: center;border: 1px solid #666;border-radius: 50%;
}.class-close-box-li {width: 1px;height: 0.5rem;background: #666;margin: auto;
}.overflow-y {overflow-y: inherit;
}.class-van-button-small {min-width: 0;border-radius: 5px;margin: 5px 2px;box-shadow: 5px 5px 5px #aaa;
}.class-plate-box {width: 100%;padding: 0.7rem 0.5rem;box-sizing: border-box;background: #eaf1f9;position: relative;
}.plate_number {.van-popup {@extend .overflow-y;}.van-popup--bottom {background: #eee;}.plate_chinese_box {width: 100%;@extend .class-plate-box;.close-box {@extend .class-close-box;div {@extend .class-close-box-div;}li {@extend .class-close-box-li;}}.van-button--small {width: 11.3%;// height: 3.5rem;@extend .class-van-button-small;}}
}.allBoard {.van-popup {@extend .overflow-y;}.plate_number_box {width: 100%;@extend .class-plate-box;.close-box {@extend .class-close-box;div {@extend .class-close-box-div;}li {@extend .class-close-box-li;}}.van-button--small {width: 8.8%;// height: 3rem;@extend .class-van-button-small;}.van-button--small:nth-child(1) {margin-bottom: 5px;}.van-button--small:nth-child(21) {margin-left: 5%;}.van-button--small:nth-child(30) {margin-left: 10%;}.van-button--small:last-child {width: 13%;}}
}

vue +vant 车牌号输入相关推荐

微信小程序组件（车牌号输入，支付键盘，滑块验证）
目录车牌号输入组件密码支付键盘组件滑块验证组件车牌号输入组件如图基于微信小程序组件封装,输出值为当前选择车牌号,可回显车牌号. 支持7位8位车牌号,因为我的项目没有此需求,所以没有测试,具 ...
vue 停车场车牌号键盘微信支付
应公司要求现在需做某医院的停车厂微信公众号支付功能前端框架 Vant https://youzan.github.io/vant/#/zh-CN/intro 预览demo:http://tangyu ...
uniapp 车牌号输入车牌号键盘新能源车牌键盘特殊车辆车牌键盘
1:效果图 2:代码: <template><view class="container"><view class="car_type_bo ...
实现模拟手机全键盘车牌号输入 jq+css
其实这篇博客并没有什么技术含量,只是比较模拟键盘书写css代码比较繁琐.如果你也有类似的需求,可以将代码复制下来改改. 首先,输入效果: 删除效果: 我喜欢用rem来做适配,所以样式大小全是用的rem ...
React实现车牌号输入
在实际工作过程中需要这样的需求,下面我将把实现的过程记录下来简述一下我的方法:按照车牌号的位数,渲染出相同个数的input输入框,每个输入框接收特定的值,通过ref(DOM)对每个输入框进行操作. ...
vue移动端车牌号输入键盘组件封装（支持新能源车牌和uniapp）
一.效果图二.说明支持点击输入框删除或输入车牌,可直接在uniapp项目中运行,将view标签换为div.并且将rpx单位换成px可在vue项目里运行三.代码 <temp ...
uniapp车牌号组件
前言 uniapp写的小程序需要车牌输入功能,不管是uniapp本身提供的组件还是第三方组件都没有提供车牌输入的组件功能.百度找了一下资料,发现车牌输出键盘组件都是自定义组件,也就是说得自己写.找了一 ...
微信小程序车牌号组件，车牌号键盘，兼容新能源号牌
话不多说,先看图使用方法: 一.将组件代码放入项目任意目录二.在需要使用键盘组件的页面json文件配置引入组件三.在模板页面wxml调用组件 <carNumber custom-input ...
【Android自定义View】车牌号输入法
VehicleEditText Android用于车牌号输入的自定义键盘.仿"支付宝-车主服务-添加车辆-车牌号"输入框展示的车牌号输入键盘.以下是本作与支付宝的对比图: 一.效果 ...

vue +vant 车牌号输入

vue +vant 车牌号输入相关推荐

最新文章

热门文章