ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证

一、关于导航怎么设置路由

  1、在el-menu这个标签的属性中添加 router ,官方文档的解释是:启用vue-router 这种模式

  2、在el-menu-item标签中的index属性直接书写路由,就可以实现正常vue-router了

  3、在el-menu-item标签中书写路由属性::route='{path:"/product"}'

<el-menuclass="el-menu-vertical"background-color="#364150"routertext-color="#e6eefd"active-text-color="#28b6f6"unique-opened><el-menu-itemindex="product" :route="{path: '/product'}"><i class="icon-instance"></i><span slot="title">实例管理</span></el-menu-item><el-menu-itemindex="pool"><i class="icon-resource"></i><span slot="title">资源管理</span></el-menu-item><el-menu-itemindex="product"><i class="icon-product"></i><span slot="title">产品管理</span></el-menu-item>

  首先父级el-menu添加router熟悉开启路由模式,子级el-menu-item可以通过index属性,或者:router属性书写路由

  补充:只加index属性是错误的,必须加:router属性给定正确路由才行。因为遇到了当只有index属性的时候,当遇到"/list/report",从list里链接进去的report这种路由时,在点击菜单如果index属性是"monitor",最后路由会变成"/list/monitor",与预期不一致。

二、使用iconfont字体图标

  1、官网下载解压,将解压后的文件全部放到assets目录下建iconfont目录下

  2、在main.js里面全局导入,然后就可以用了。用的时候class前面需要加上iconfont

import './assets/iconfont/iconfont.css'

三、form表单自定义验证规则

  验证手机号(我是独立写了一个validator.js文件的,放在util目录下,然后把所有验证规则都写在这里,使用的时候导入即可)

/*** 校验规则文件* 触发方式:type=['blur','change']*/
//定义phone验证全局变量
var validPhone=(rule, value,callback)=>{const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;if (!value){callback(new Error('请输入电话号码'))}else  if (!reg.test(value)){callback(new Error('请输入正确的11位手机号码'))}else {callback()}
}
export const validator = {required:{required:true,message:'必填项',trigger:'blur'},email:{type:'email',message:'请输入正确的邮箱',trigger:['blur','change']},minLen:{min:6,message: '长度最少6个字符', trigger: 'blur'},phone:{required:true,validator:validPhone,trigger:['blur','change']}
}

//vue组件中使用
<el-formref="login_pwd":model="login_pwd":rules="rules"status-icon><el-form-item prop="phone" :rules="[rules.required,rules.phone]"><el-input v-model="login_pwd.phone" placeholder="请输入账户"></el-input></el-form-item>

  另外一种方式可以直接使用在pattern中书写正则,并且配合elementUI进行表单验证。

  pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式。

data(){const valPwd = (rule, value, callback) => {            if (!value) {callback(new Error('请再次输入密码'));} else if (value !== this.resetPassword.password) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {resetPassword:{},rules:{password:[{required:true,message:'请输入密码',trigger:'blur'},{pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/,message: '密码格式不正确'}],repeatPassword:{validator:valPwd,trigger:'blur'},phone:[{required:true,message:'请输入电话',trigger:'blur'},{pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,message: '请输入正确的11位手机号码'}],veriCode:{required:true,message:'请输入密码',trigger:'blur'}},codeDisabled:false,countdown:60}
},

//直接使用prop验证即可
<el-form-item prop="repeatPassword"><el-input type="password" v-model="resetPassword.repeatPassword" placeholder="重复密码"></el-input>
</el-form-item>

文档里面的

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

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

相关文章

【C++进阶】哈希的应用之位图和布隆过滤器

位图和布隆过滤器 一&#xff0c;位图1. 实现2. 位图的应用 二&#xff0c;布隆过滤器1. 使用场景2. 模拟实现 三&#xff0c;海量数据面试题哈希切分 四&#xff0c;总结 这一节我们来看哈希的应用 一&#xff0c;位图 先来看一个面试题 这里如果用unordered_set来解决&…

C++11可变模板参数:海纳百川的Args

目录 一、可变模板参数的概念及功能 1.1Args的概念与使用 1.2获取args中的参数 二、emplace可变模板参数的实际应用 三、逗号表达式展开参数包 一、可变模板参数的概念及功能 1.1Args的概念与使用 C11的新特性可变参数模板能够让您创建可以接受可变参数的函数模板和类模板…

二维码门楼牌管理应用平台建设:物业缴费的数字化革新

文章目录 前言一、物业缴费的数字化革新二、在线缴费功能的实现三、智能化缴费管理的优势四、面临的挑战与未来展望五、结语 前言 随着科技的不断进步&#xff0c;二维码门楼牌管理应用平台已成为物业管理的新趋势。在这样一个平台上&#xff0c;物业缴费的数字化革新不仅提高…

【计算机网络】TCP协议可靠传输保证(序列号/确认应答机制、超时重传、最长消息长度、滑动窗口控制、拥塞控制)

TCP协议可靠传输 1.序列号确认应答机制2.超时重传3.最长消息长度4.滑动窗口控制5.拥塞控制 1.序列号确认应答机制 这个机制类似于问答的形式。比如在课堂上老师会问你“明白了吗&#xff1f;”&#xff0c;假如你没有隔一段时间没有回应或者你说不明白&#xff0c;那么老师就会…

橘子学JDK之JMH-03(@State)

这里我们来搞官方的第三个案例&#xff0c;引入新的注解State。 一、案例三代码 package com.levi;/*** Description:* Author: Levi* Date: 2024/4/8 18:44*/import org.openjdk.jmh.annotations.*; import org.openjdk.jmh.runner.Runner; import org.openjdk.jmh.runner.R…

【YOLOV8】项目目录重点部分介绍和性能评估指标

目录 一 项目目录重点部分介绍 二 性能评估指标 一 项目目录重点部分介绍 1 ultralytics

windows环境变量滥用维权/提权

0x01 前提 通过滥用系统的路径搜索机制来欺骗高权限用户执行看似合法的系统二进制文件&#xff0c;实际上是恶意的代码或程序&#xff0c;从而导致升权限并执行恶意操作。 攻击的关键前提&#xff1a; 路径搜索顺序&#xff1a; 当用户在命令行或程序中执行一个命令时&#x…

kafka 高吞吐设计分析

说明 本文基于 kafka 2.7 编写。author blog.jellyfishmix.com / JellyfishMIX - githubLICENSE GPL-2.0 概括 支撑 kafka 高吞吐的设计主要有以下几个方面: 网络 nio 主从 reactor 设计模式 顺序写。 零拷贝。 producer producer 开启压缩后是批量压缩&#xff0c;bro…

【Qt】:常用控件(七:输入类控件)

常用控件 一.Combo Box&#xff08;下拉框&#xff09;二.Spin Box&#xff08;微调框&#xff09;三.ate Edit&Time Edit&#xff08;日期微调框&#xff09;四.Dial&#xff08;旋钮&#xff09;五.Slider&#xff08;滑动条&#xff09; 一.Combo Box&#xff08;下拉框…

738.单调递增的数字

// 定义一个名为Solution的类 class Solution { public:// 定义公共成员函数&#xff1a;计算并返回大于等于输入整数N且其各位数字非降序排列的最小整数int monotoneIncreasingDigits(int N) {// 将整数N转换成字符串形式&#xff0c;方便操作每一位数字string strNum to_str…

23linux 自定义shell文件系统

打印环境变量&#xff0c;把当前子进程所有环境变量打印出来 环境变量也是一张表&#xff08;指针数组以null结尾&#xff0c;最后条件不满足就退出了 &#xff09; 用子进程调用 结论1 当我们进行程序替换的时候 &#xff0c;子进程对应的环境变量&#xff08;子进程的环境变…

Mybatis执行器(Executor)

Executor简介 Executor Executor是MyBatis的核心接口之一&#xff0c;其中定义了数据库操作的基本方法。在实际应用中经常涉及的SqlSession接口的功能&#xff0c;都是基于Executor接口实现的。 BaseExecutor BaseExecutor是一个实现了Executor接口的抽象类,它实现了Execut…

Yolov8-pose关键点检测:特征融合 | CAMixing:卷积-注意融合模块和多尺度提取能力 | 2024年4月最新成果

💡💡💡本文独家改进:CAMixingBlock更好的提取全局上下文信息和局部特征,包括两个部分:卷积-注意融合模块和多尺度前馈网络; 💡💡💡如何跟YOLOv8结合:1)放在backbone后增强对全局和局部特征的提取能力;2)放在detect前面,增强detect提取能力; 提供多种改进方…

【MATLAB源码-第180期】基于matlab的PTS,SLM,CPFilter三种降低OFDM系统的PAPR仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 1. 限幅和滤波&#xff08;Clipping and Filtering&#xff09; 原理简介 限幅和滤波是一种基础且直观的方法&#xff0c;用于降低OFDM信号的PAPR。在限幅阶段&#xff0c;信号的幅度在达到设定阈值时会被削减&#xff0c;…

皮具5G智能制造工厂数字孪生可视化平台,推进企业数字化转型

皮具5G智能制造工厂数字孪生可视化平台&#xff0c;推进企业数字化转型。随着信息技术的快速发展&#xff0c;数字化转型已成为企业提升竞争力、实现可持续发展的关键路径。皮具行业&#xff0c;作为一个传统的手工制造业&#xff0c;正面临着巨大的市场变革和技术挑战。如何在…

红队打靶:holynix打靶流程-文件包含-文件上传-修改伪设备提权(vulnhub)

目录 开头 1.主机发现和端口扫描 2.80端口-万能密码-文件泄露 sql注入万能密码 文件泄露-读取/etc/passwd文件 sqlmap POST注入| SQL注入实现越权 | 水平越权 最后构造的sql语句,为什么这么构造嘞&#xff1f; 3.文件上传、文件解析漏洞利用 浏览器怎么访问家目录啊&…

C语言指针—指针和指针类型

指针是什么&#xff1f; 指针是什么&#xff1f; 指针理解的2个要点&#xff1a; 指针是内存中一个最小单元的编号&#xff0c;也就是地址 平时口语中说的指针&#xff0c;通常指的是指针变量&#xff0c;是用来存放内存地址的变量 总结&#xff1a;指针就是地址&#xff0c;口…

Windows深度学习环境----Cuda version 10.2 pytorch3d version 0.3.0

Requirements Python version 3.8.5Pytorch version: pytorch1.6.0 torchvision0.8.2 torchaudio0.7.0 cudatoolkit10.2.89pytorch3d version 0.3.0Cuda version 10.2 感觉readme文件里的不适配&#xff0c;跟pytorch官网不同 以前的 PyTorch 版本 |PyTorch的 # CUDA 10.2 c…

充电桩项目,开源啦!

好&#xff0c;我是田哥 很多人&#xff0c;最近都在关注我的充电桩项目&#xff0c;之前建了一个微服务架构的项目&#xff0c;也有单体项目的代码开源。 今天&#xff0c;我把最新版微服务架构的充电桩项目源代码开源。 充电桩的输入端与交流电网直接连接&#xff0c;输出端都…