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.hqwc.cn/news/601237.html

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

相关文章

新一代最强开源UI自动化测试神器Playwright(Java版)(对话框处理)

&#x1f3ad;Playwright让网页对话框&#x1f310;&#x1f4ac;处理变得更加快捷&#xff01;网页对话框是在网页上出现的常见弹窗&#xff0c;包括Alert、Confirm和Prompt等。这些对话框通常需要用户输入信息或进行某些选择&#xff0c;但是在自动化测试中处理它们可能会很棘…

xhci 数据结构

xhci 数据结构 xhci 数据结构主要在手册上有详细的定义&#xff0c;本文根据手册进行归纳总结&#xff1a; 中断关注的包括&#xff1a; device contexttrb ringtrb device context设备上下文 设备上下文数据结构由xHC管理&#xff0c;用于向系统软件报告设备配置和状态信息。…

用动态IP采集数据总是掉线是为什么?该怎么解决?

动态IP可以说是做爬虫、采集数据、搜集热门商品信息中必备的代理工具&#xff0c;但在爬虫的使用中&#xff0c;总是会遇到动态IP掉线的情况&#xff0c;从而影响使用效率&#xff0c;本文将探讨动态IP代理掉线的几种常见原因&#xff0c;并提供解决方法&#xff0c;以帮助大家…

Kubernetes有状态任务

有状态任务是指执行期间需要维护一定状态或数据的任务或工作。这些任务通常需要记录并维护数据、状态、上下文或进度信息&#xff0c;并且这些信息在任务执行期间保持持久。有状态任务的解决目标是确保任务在不同的环境、节点或时间点之间维持一致的状态和标识。这种任务通常需…

电商技术揭秘十二:云计算在电商中的应用场景

相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xff1a;电商平台…

【LeetCode笔记】巧妙写出二叉树前中后序遍历

忘记是在哪里看到的了&#xff0c;有一种画图的办法可以巧妙写出二叉树前中后序遍历。 一条根本原则&#xff1a;一根线从二叉树的根的左部不间断地画到根的右部&#xff0c;要绕整个二叉树一圈。 前序遍历&#xff0c;就让每个节点拥有一个左侧的“句柄”&#xff1b; 中序遍历…

代码随想录|Day34|动态规划03|343.整数拆分、96.不同的二叉搜索树

343.整数拆分 动规五步&#xff1a; 确定 dp[i] 含义&#xff1a;拆分数字 i&#xff0c;可以获得的最大乘积为 dp[i]。递推公式&#xff1a;dp[i] max(j * (i - j), j * dp[i - j])。i 可以被拆解为两个数&#xff08;j 和 i - j&#xff09;或者多个数&#xff08;j 和 dp[i…

苍穹外卖Day10——总结10

前期文章 文章标题地址苍穹外卖Day01——总结1https://lushimeng.blog.csdn.net/article/details/135466359苍穹外卖Day02——总结2https://lushimeng.blog.csdn.net/article/details/135484126苍穹外卖Day03——总结3https://blog.csdn.net/qq_43751200/article/details/1363…

JS 轮播图点击左右切换

点击左右按钮实现轮播图切换图片 style&#xff1a; *{margin: 0;padding: 0;margin: auto;}#img1{width: 300px;height: 300px;position: relative;}#butto1{width: 50px;height: 100px;font-size: 50px;border: none;background-color: hsla(0, 0%, 0%, 0.2);position: abs…

管易云和金蝶云星空接口打通对接实战

管易云和金蝶云星空接口打通对接实战 对接系统&#xff1a;管易云 管易云是金蝶旗下专注提供电商企业管理软件服务的子品牌&#xff0c;先后开发了C-ERP、EC-OMS、EC-WMS、E店管家、BBC、B2B、B2C商城网站建设等产品和服务&#xff0c;涵盖电商业务全流程。 接入系统&#xff1…

用二八定律分析零售数据,不就更直观了吗?

20%的商品贡献了80%的销售金额&#xff0c;你会不会想知道这些商品的销售金额、毛利、销售金额累计占比、毛利累计占比&#xff0c;会不会想知道这些商品在各个门店的销售表现&#xff1f;看是否能进一步提高销售金额&#xff0c;提高毛利。这样的报表该怎么做&#xff1f;奥威…

jdk8新特性 方法引用

简介 lambda表达式是用来简化匿名内部类的方法引用 使用来简化 lambda表达式的 方法引用的标志 两个冒号 静态方法 静态方法 class CompareByAge {public static int compare(Student o1, Student o2) {return o1.getAge() - o2.getAge();} }静态方法引用 Arrays.sort(students…