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 (!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-form ref="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>