vue element-ui 车牌号选择组件

实现效果

carnumber.vue

<template><div class="car_no_popover"><div class="row_div"><div class="every_div" v-for="item in area"><button @click="selectCarNo(item)">{{ item }}</button></div></div><div class="row_div"><div class="every_div" v-for="item in areaLetter"><button @click="selectCarNo(item)">{{ item }}</button></div></div><div class="row_div"><div class="btn_div"><el-button type="primary" size="mini" icon="el-icon-back" @click="backBtnHandle"></el-button><el-button type="primary" size="mini" @click="sureBtnHandle">确认</el-button><el-button type="primary" size="mini" @click="clearBtnHandle">清除</el-button></div></div></div>
</template>
<script>export default {props: {value: Boolean,modelValue: String,},data() {return {visible: false,carNo: '',area: ["京", "津", "沪", "渝", "冀", "豫", "云", "辽", "黑", "湘", "皖", "鲁", "新", "苏", "浙","赣", "鄂", "桂", "甘", "晋", "蒙", "陕", "吉", "贵", "粤", "青", "藏", "川", "宁", "琼"],areaLetter: ["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", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],}},methods: {selectCarNo(item) {this.carNo = this.carNo + itemthis.$emit('update:modelValue', this.carNo)},backBtnHandle() {if (this.carNo.length > 0) {this.carNo = this.carNo.substring(0, this.carNo.length - 1)this.$emit('update:modelValue', this.carNo)}},sureBtnHandle() {this.$emit('fatherMethod');},clearBtnHandle() {this.carNo = ''this.$emit('update:modelValue', this.carNo)},updateValue(item) {this.carNo = item;this.$emit('update:modelValue', this.carNo)}}}
</script>
<style scoped>.car_no_popover {margin-top: 18px !important;}.every_div {margin-left: 4px;margin-top: 4px;}.every_div button {width: 30px;cursor: pointer;}.row_div {display: flex;flex-wrap: wrap;}.row_div .btn_div {position: absolute;right: 13px;bottom: 11px;}.row_div .btn_div button {height: 22px;padding: 4px 13px;}
</style>

父组件引用

<el-col :span="12"><el-form-item label="进土车号" prop="enterCarNo"><el-popoverplacement="bottom"width="400"v-model="carVisible"trigger="click"><car-number :model-value.sync="form.enterCarNo"  ref="carNumber"  @fatherMethod="carVisibleChange"></car-number><el-input slot="reference" v-model.trim="form.enterCarNo" placeholder="请输入进土车号" :disabled="this.disabled" @input="changeValue(form.enterCarNo)" /></el-popover></el-form-item></el-col> 

涉及到的方法 

changeValue(item){this.$refs.carNumber.updateValue(item); // 调用子组件的方法
},
carVisibleChange(){this.carVisible = false;
},

 附带车牌号验证


data() {let validatorCarno = (rule, value, callback) => {let flag = falselet xreg =/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;let creg =/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;if (value.length === 7) {flag = creg.test(value);} else if (value.length === 8) {flag = xreg.test(value);}if (flag) {callback();} else {return callback(new Error("车牌号格式不正确"));}};return {dataRules: {carno: [{required: true, message: this.$t('validate.required'), trigger: 'change'},{validator: validatorCarno, message: '车牌号格式不正确'}]}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/29492.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

绿色免费离线版JS加密混淆工具 - 支持全景VR加密, 小程序js加密, H5网站加密

自从我们推出在线版的免费JS加密混淆工具以来&#xff0c;受到了广大用户的热烈欢迎。特别是全景开发人员&#xff0c;他们使用该工具加密VR插件的JS代码, 添加域名锁等&#xff0c;都非常有效地保护了插件的代码资源。 最近&#xff0c;我们收到了许多用户的反馈&#xff0c;…

Cloneable接口和对象的克隆——浅拷贝和深拷贝

用Clonable接口实现对象的克隆——浅拷贝和深拷贝 1. 浅拷贝2. 深拷贝 在Object类中提供了clone方法&#xff0c;用来是实现对象的克隆&#xff01; 1. 浅拷贝 我们首先来尝试用clone方法去克隆一个Person对象 public class Person {public String name;public int age;publi…

Perforce静态代码分析专家解读MISRA C++:2023®新标准:如何安全、高效地使用基于范围的for循环,防范未定义行为

MISRA C&#xff1a;2023——MISRA C 标准的下一个版本来了&#xff01;为了帮助您了解 MISRA C&#xff1a;2023相比于之前版本的变化&#xff0c;我们将继续为您带来Perforce首席技术支持工程师Frank van den Beuken博士的博客系列&#xff0c;本期为第三篇。 在前两篇系列文…

企业为何需要搭建线上虚拟品牌展厅?

在数字化时代&#xff0c;线上虚拟品牌展厅已成为企业不可或缺的一部分。以下是构建线上虚拟品牌展厅的4大关键理由&#xff1a; 1、迎合在线购物趋势 随着移动互联网的飞速发展和普及&#xff0c;消费者越来越倾向于在线购物。一个线上虚拟品牌展厅能够完美地满足这一需求&am…

数据分析必备:一步步教你如何用matplotlib做数据可视化(5)

1、Matplotlib Multiplots 在本章中&#xff0c;我们将学习如何在同一画布上创建多个子图。 subplot()函数返回给定网格位置的axes对象。此函数的签名是 plt.subplot(subplot(nrows, ncols, index)在当前图中&#xff0c;该函数创建并返回一个Axes对象&#xff0c;在ncolsaxe…

VScode如何调试

调试 1.打断点 1.点击调试按钮 3.点击下拉选择环境node&#xff0c;点击绿三角选择输入调试的命令&#xff08;具体命令查看package.json中scripts中的哪一个命令和运行的文件&#xff09;&#xff0c;点击右边的设置&#xff08;可以直接跳下面第八步&#xff01;&#xff…

EOS Black灵魂回响黑色账号注册 EOS Black怎么注册账号教程

又一款新的MMORPG游戏即将上线&#xff0c;游戏名称叫做《灵魂回响&#xff1a;黑色》&#xff0c;游戏继承了《灵魂回响》系列的基本世界观和背景故事&#xff0c;从危险中救出来的阿尔卡纳们沉醉于权力开始堕落, 少数阿尔卡纳还没有忘记自己的本分,为净化世界而努力&#xff…

[大模型]MiniCPM-2B-chat WebDemo部署

MiniCPM-2B-chat 介绍 MiniCPM 是面壁智能与清华大学自然语言处理实验室共同开源的系列端侧大模型&#xff0c;主体语言模型 MiniCPM-2B 仅有 24亿&#xff08;2.4B&#xff09;的非词嵌入参数量。 经过 SFT 后&#xff0c;MiniCPM 在公开综合性评测集上&#xff0c;MiniCPM …

124M中国十大城市群规划范围数据

城市群是由若干个都市圈构成的广域城镇化形态&#xff0c;其内部应该包含若干个中心城市。 都市圈是指围绕某一个中心城市&#xff0c;即超大或特大城市的城镇化形态。 无论在体量还是在层级上&#xff0c;都市圈要低于城市群的概念。 现在&#xff0c;我们就来为你分享一下…

不入耳的蓝牙耳机平价推荐,五大爆款分析测评

开放式耳机在如今社会中已经迅速成为大家购买耳机的新趋势。它作为骨传导耳机&#xff0c;深受用户的喜爱&#xff0c;不仅可以随时感知周围环境&#xff0c;还提供了高质量的音效体验&#xff0c;对于热爱运动的人士而言&#xff0c;高品质的骨传导耳机无疑是首选。同时&#…

Spring是如何设计IOC容器的?BeanFactory ApplicationContext

BeanFactory是Spring框架中最底层的接口&#xff0c;用于实例化、配置和管理bean。它使用控制反转&#xff08;IOC&#xff09;模式&#xff0c;将对象的创建、管理和装配的职责从应用程序代码中转移给Spring容器。这样&#xff0c;应用程序代码就无需关心对象如何创建和装配&a…

卡本医疗VENUS登陆香港国际医疗展,探索全球医疗发展新机遇

由香港贸易发展局主办的第15届香港国际医疗及保健展、以及联合香港特别行政区政府举办的第四届亚洲医疗健康高峰论坛在中国香港圆满落幕。 香港国际医疗及保健展是亚太地区最具影响力的B2B医疗贸易展览会之一&#xff0c;辐射海内外市场&#xff0c;本次邀请了超过8500家买家以…

模型部署onnx入门

一、定义 1.定义 2. 环境安装 3. 案例 4. 可视化界面 5. 参考网址 6. 推理引擎 onnx Runtime 进行单张图片推理&#xff0c;本地部署 7. 推理引擎onnx Runtime 进行单张图片推理&#xff0c;调用摄像头获取画面 8. 推理引擎onnx Runtime 进行图片推理&#xff0c;调用摄像头获…

美国原装二手KEITHELY2410替代新品keithley2470数字源表

Keithley 2470 高压 SourceMeter 源测量单元 (SMU) 仪器将先进的 Touch, Test, Invent 技术带到您的指尖。它将创新的图形用户界面 (GUI) 与电容式触摸屏技术相结合&#xff0c;使测试变得直观&#xff0c;并最大限度地缩短学习曲线&#xff0c;帮助工程师和科学家更快地学习、…

【字符串解析】IP地址字段解析提取函数接口

在嵌入式业务逻辑中&#xff0c;我们有时需要从配置文件、串口或者服务端接收的消息数据中进行字符串解析&#xff0c;来提取需要的目标字符串字段。通常我们会调用字符串处理相关的函数&#xff0c;例如strstr&#xff0c;strchr&#xff0c;sscanf等&#xff0c;再结合指针偏…

数据驱动决策:工单统计工具如何赋能企业精准运营

在当今这个数字化飞速发展的时代&#xff0c;企业对于内部运营效率的追求已经达到了前所未有的高度。你是否曾为了繁杂的工单统计管理而头疼不已&#xff1f;是否曾因为无法准确进行工单统计数据而错失商机&#xff1f;今天&#xff0c;我将向你展示一款革命性的工单统计工具&a…

MBR40100CT-ASEMI无人机专用MBR40100CT

编辑&#xff1a;ll MBR40100CT-ASEMI无人机专用MBR40100CT 型号&#xff1a;MBR40100CT 品牌&#xff1a;ASEMI 封装&#xff1a;TO-220 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;40A 最大循环峰值反向电压&#xff08;VRRM&#xff09;&#xff1a;100V…

【数据分析】线性及逻辑回归模型和Python实现

各位大佬好 &#xff0c;这里是阿川的博客&#xff0c;祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 Python 初阶 Python–语言基础与由来介绍 Python–…

冒泡排序、选择排序

冒泡排序 按照冒泡排序的思想&#xff0c;我们要把相邻的元素两两比较&#xff0c;当一个元素大于右侧相元素时&#xff0c;交换它们的位置&#xff1b;当一个元素小于或等于右侧相邻元素时&#xff0c;位置不变 大的往右丢&#xff08;往下沉&#xff09;&#xff0c;小的往…

移动应用开发大作业报告

1 基本信息 1.1 系统名称 中华字典 1.2 开发运行环境 开发环境&#xff1a;Windows 10 专业版&#xff0c;JDK 1.8&#xff0c;AndroidStudio 运行环境&#xff1a;Java SE Runtime Environment (JRE) 8 1.3 使用的核心技术 JFrame&#xff1a;作为实现界面的窗体类&…