#简易的车牌号选择器(vue版本)

当时没有考虑到新能源车牌的问题，使用该代码的同仁注意一下哦。

github：https://github.com/JACK-Liang-2020/jar-common-tool

<template><div class="container"><div class="in-mask"@click="clickMask"></div><div @click="showWrap"><slot></slot></div><transition name="hehe"><div v-if="show"><!--车牌首字--><div class="first-word-wrap"v-if="showFirst"><div class="first-word"><div class="word"v-for="item in allKeyWord.province"@click="selectFirstWord(item)":key="item.id"><span>{{item}}</span></div><div class="in-delete"@click="deleteItem"><i class="cubeic-wrong"style="font-size:23px;"></i><span>x</span></div></div><div class="in-close"@click="close">收起</div></div><!--车牌余字--><div class="keyboard-wrap"v-else><div class="keyboard"><div class="in-alphabet"><span v-for="(item,index) in allKeyWord.alphabet":key="index"@click="clickKeyBoard(item)">{{item}}</span><div class="in-delete"@click="deleteItem"><i class="cubeic-wrong"style="font-size:23px;"></i></div></div></div><div class="in-close"@click="close">收起</div></div></div></transition></div>
</template>
<script>
export default {data () {return {selectArr: [],allKeyWord: {province: ['京', '湘', '津', '鄂', '沪', '粤', '渝', '琼', '翼', '川', '晋', '贵', '辽', '云', '吉', '陕', '黑', '甘', '苏', '青', '浙', '皖', '藏', '闽', '蒙', '赣', '桂', '鲁', '宁', '豫', '新'],alphabet: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']},show: false,showFirst: false}},watch: {selectArr (val) {this.$emit('input', val)}},methods: {showWrap () {this.show = truethis.showFirst = !(this.selectArr.length > 0)},selectFirstWord (item) {this.addSelect(item)this.showFirst = false},clickKeyBoard (item) {this.addSelect(item)},addSelect (item) {// 点击自定义键盘if (this.selectArr.length < 7) {this.selectArr.push(item)} else {// this.$createToast({//   txt: '车牌号选择超过规定个数',//   type: 'txt'// }).show()// this.close()}},deleteItem () {this.selectArr.pop()this.showFirst = !(this.selectArr.length > 0)},close () {this.show = false},clickMask () {// console.log('clickMask')this.close()}},mounted () {this.selectArr = []}
}
</script>
<style lang="less" scoped>
.container {.in-mask {position: absolute;left: 0;top: 0;z-index: -1;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0);}.first-word-wrap {// height: 9.4rem;background-color: #d2d5db;padding: 10px;position: fixed;bottom: 0;left: 0;right: 0;.first-word {display: flex;flex-wrap: wrap;justify-content: space-around;&::after {//重要width: 41px;content: "";}.word {box-sizing: border-box;width: 30px;height: 30px;box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);text-align: center;margin: 5px;span {box-sizing: border-box;display: flex;align-items: center;justify-content: center;text-align: center;width: 100%;height: 100%;background-color: #fff;color: #000;// border: 1px solid #fff;border-radius: 0.125rem;}}}}.keyboard-wrap {background-color: #d2d5db;position: fixed;bottom: 0;left: 0;right: 0;padding: 10px;.keyboard {display: flex;justify-content: space-between;align-items: center;.in-alphabet {display: flex;flex-wrap: wrap;justify-content: space-around;&::after {//重要width: 174px;content: "";}span {text-align: center;display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);background-color: #fff;border-radius: 5px;margin: 5px;&:active {background-color: #e4e4e4;}&.bordernone {border: none;box-shadow: none;background-color: #d2d5db;&:active {background-color: #d2d5db;}}&.delete {background-color: #465266;}// &:last-child {//   flex: 1;// }}}}}.in-close {text-align: center;display: flex;align-items: center;justify-content: center;width: 100%;height: 30px;box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);background-color: #fff;border-radius: 5px;margin: 5px;&:active {background-color: #e4e4e4;}&.bordernone {border: none;box-shadow: none;background-color: #d2d5db;&:active {background-color: #d2d5db;}}&.delete {background-color: #465266;}&:last-child {flex: 1;}}.in-delete {text-align: center;display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);background-color: #fff;border-radius: 5px;margin: 5px;&:active {background-color: #e4e4e4;}&.bordernone {border: none;box-shadow: none;background-color: #d2d5db;&:active {background-color: #d2d5db;}}&.delete {background-color: #465266;}}
}/*淡入淡出*/
.hehe-enter,
.hehe-leave-to {opacity: 0;
}
.hehe-enter-to,
.hehe-leave {opacity: 1;
}
.hehe-enter-active,
.hehe-leave-active {transition: all 0.5s;
}
</style>

#简易的车牌号选择器(vue版本)相关推荐

android双日期选择器,AndroidPicker 安卓选择器类库，包括日期选择器、时间选择器、单项选择器、双项选择器、城市地址选择器、车牌号选择器 @codeKK Android开源站...
安卓选择器类库,包括日期及时间选择器(可设置范围).单项选择器(可用于性别.职业.学历.星座等).城市地址选择器(分省级.地级及县级).数字选择器(可用于年龄.身高.体重.温度等).双项选择器.颜色选 ...
vue 停车场车牌号键盘微信支付
应公司要求现在需做某医院的停车厂微信公众号支付功能前端框架 Vant https://youzan.github.io/vant/#/zh-CN/intro 预览demo:http://tangyu ...
vue移动端车牌号输入键盘组件封装（支持新能源车牌和uniapp）
一.效果图二.说明支持点击输入框删除或输入车牌,可直接在uniapp项目中运行,将view标签换为div.并且将rpx单位换成px可在vue项目里运行三.代码 <temp ...
vue 车牌号校验（含新能源）
var carPhoneValid = (rule, value, callback) => {const plateNumber = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵 ...
用vue写的移动端车牌号输入法
效果图: (录制了视频演示,然而不会上传.....心塞.....) 本页面所在项目已上传GitHub,github下载地址:https://github.com/dan-Zd/car-vueapp ...
vue +vant 车牌号输入
最近写了一个预进出场的需求 1.HTML <template><div class="keyboard"><div class="numbe ...
2如何识别操作系统_扫描车牌识别车牌号的功能sdk
扫描车牌识别车牌号的功能sdk OCR (Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗.亮的模式确定其形 ...
常用正则表达式（手机，邮箱，身份证号，昵称，用户名，车型，车牌号）
//邮箱 + (BOOL) validateEmail:(NSString *)email { NSString *emailRegex = @"[A-Z0-9a-z._%+-]+@[A-Z ...
海康威视错误代码0xf_调用海康威视sdk获取车牌号
环境: win10(10.0.16299.0)+ vs2017 sdk版本:CH-HCNetSDK_Win32_V5.3.2.15_build20171122https://download.csdn ...

#简易的车牌号选择器(vue版本)

#简易的车牌号选择器(vue版本)相关推荐

最新文章

热门文章