博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
阅读量:4653 次
发布时间:2019-06-09

本文共 2613 字,大约阅读时间需要 8 分钟。

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

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

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

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

实例管理
资源管理
产品管理

  首先父级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组件中使用

  另外一种方式可以直接使用在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验证即可

 

转载于:https://www.cnblogs.com/goloving/p/8883255.html

你可能感兴趣的文章
.Net MVC3中取得当前区域的名字(Area name)
查看>>
获得屏幕像素以及像素密度
查看>>
int与string转换
查看>>
adb命令 判断锁屏
查看>>
推荐一个MacOS苹果电脑系统解压缩软件
查看>>
1035等差数列末项计算
查看>>
CDMA鉴权
查看>>
ASP.NET MVC Identity 兩個多個連接字符串問題解決一例
查看>>
过滤器与拦截器区别
查看>>
第二阶段站立会议7
查看>>
JAVA多线程
查看>>
delphi 更改DBGrid 颜色技巧
查看>>
POJ 2031 Building a Space Station
查看>>
面向对象1
查看>>
任意阶幻方(魔方矩阵)C语言实现
查看>>
织梦教程
查看>>
杭电多校 Harvest of Apples 莫队
查看>>
java 第11次作业:你能看懂就说明你理解了——this关键字
查看>>
C/C++心得-结构体
查看>>
函数名作为参数传递
查看>>