ElementUI使用問題記錄：設置路由+iconfont圖標+自定義表單驗證

1、關於導航怎麼設置路由

　　一、在el-menu這個標籤的屬性中添加 router ,官方文檔的解釋是：啓用vue-router 這種模式

　　二、在el-menu-item標籤中的index屬性直接書寫路由，就能夠實現正常vue-router了

　　三、在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"，與預期不一致。

2、使用iconfont字體圖標

　　一、官網下載解壓，將解壓後的文件所有放到assets目錄下建iconfont目錄下

　　二、在main.js裏面全局導入，而後就能夠用了。用的時候class前面須要加上iconfont

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

3、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>