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;…

Android WindowFeature小探究

主Activity&#xff0c;用来提供文字信息和输入效果ID&#xff1a; package com.zms.windowfeature; import org.xml.sax.Parser; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.Menu; import android.v…

【代码随想录算法训练营第四十一天|1049.最后一块石头的重量II、494.目标和、474.一和零】

文章目录 1049.最后一块石头的重量II494.目标和474.一和零 1049.最后一块石头的重量II 稍微数学退一下就可以看出实际上还是把数组分成两个部分&#xff0c;去求两个子集的差值的最小值&#xff0c;和昨天最后一题是一样的。 class Solution:def lastStoneWeightII(self, sto…

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;本期为第三篇。 在前两篇系列文…

【NLP基础知识】有哪些相似度计算方式(持续更新)

相异性/相似性的计算-zine 相似度计算方式 1. Euclidean Distance (L2) 用途&#xff1a;主要用于计算机视觉领域。 解释&#xff1a;计算两个点之间的直线距离。假设有两个向量 a [ a 1 , a 2 , . . . , a n ] \mathbf{a} [a_1, a_2, ..., a_n] a[a1​,a2​,...,an​] …

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

在数字化时代&#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…

嵌入式学习——数据库(SQL语句和sqlite编程)——day35

1. 数据库 数据库是一个按数据结构来存储、管理和检索数据的计算机软件系统。它是存储数据的电子仓库&#xff0c;旨在以高效、有组织的方式处理大量信息。 2. SQLite SQLite是一个进程内的库&#xff0c;实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。 …

[大模型]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;我们就来为你分享一下…

Ubuntu 22.04 一键安装 Oracle 11GR2 单机

前言 Oracle 一键安装脚本&#xff0c;演示华为 Ubuntu 22.04 一键安装 Oracle 11GR2 单机版过程&#xff08;全程无需人工干预&#xff09;。 ⭐️ 脚本下载地址&#xff1a;Shell脚本安装Oracle数据库 安装准备 1、安装好操作系统&#xff0c;建议安装图形化2、配置好网络3…

MTU简介

MTU 概念定义 最大传输单元MTU&#xff08;Maximum Transmission Unit&#xff0c;MTU&#xff09;&#xff0c;是指网络能够传输的最大数据包大小&#xff0c;以字节为单位。 是一种网络协议中规定的在一次传输中所能承载的最大数据量。是一个关键的网络参数&#xff0c;对数…

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

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

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

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

如何配置docker通过代理服务器拉取镜像

如果 docker 所在的环境是通过代理服务器和互联网连通的&#xff0c;那么需要一番配置才能让 docker 正常从外网正常拉取镜像。然而仅仅通过配置环境变量的方法是不够的。本文结合已有文档&#xff0c;介绍如何配置代理服务器能使docker正常拉取镜像。 本文使用的docker 版本是…

【vue3】vue3中使用reactive定义的变量响应式丢失问题

这里写目录标题 1. 解构响应式对象属性2. 添加新属性到响应式对象3. 异步更新响应式状态4.总结 当你说“vue3中使用reactive定义的变量响应式丢失问题”时&#xff0c;以下是一些更具体的例子和解决方案&#xff1a; 1. 解构响应式对象属性 问题&#xff1a; import { reacti…

Django里的模板变量

变量是模板中最基本的组成单位&#xff0c;是视图传递给模板的数据&#xff1b; 当模板引擎遇到变量时&#xff0c;会将该变量计算为结果&#xff1b; 变量以{{variable}}表示&#xff0c;如&#xff1a; obj{“name”:“张三”&#xff0c;“age”:18} {{obj.name}} #输出 …