ElementUI使⽤问题记录：设置路由+iconfont图标+⾃定义表单
验证
⼀、关于导航怎么设置路由
  1、在el-menu这个标签的属性中添加 router ，官⽅⽂档的解释是：启⽤vue-router 这种模式
  2、在el-menu-item标签中的index属性直接书写路由，就可以实现正常vue-router了
  3、在el-menu-item标签中书写路由属性：:route='{path:"/product"}'
<el-menu
class="el-menu-vertical"
background-color="#364150"
router
text-color="#e6eefd"
active-text-color="#28b6f6"
unique-opened>
<el-menu-item
index="product":route="{path: '/product'}">
<i class="icon-instance"></i>
<span slot="title">实例管理</span>
</el-menu-item>
<el-menu-item
index="pool">
<i class="icon-resource"></i>
<span slot="title">资源管理</span>
</el-menu-item>
<el-menu-item
index="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 (!st(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-form
ref="login_pwd"
:model="login_pwd"
:rules="rules"
status-icon>
<el-form-item prop="phone" :rules="[quired,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) {
elementui登录界面
callback(new Error('请再次输⼊密码'));
} else if (value !== setPassword.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="peatPassword" placeholder="重复密码"></el-input> </el-form-item>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。