1、關於導航怎麼設置路由css
一、在el-menu這個標籤的屬性中添加 router ,官方文檔的解釋是:啓用vue-router 這種模式vue
二、在el-menu-item標籤中的index屬性直接書寫路由,就能夠實現正常vue-router了正則表達式
三、在el-menu-item標籤中書寫路由屬性::route='{path:"/product"}'vue-router
<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",與預期不一致。ui
2、使用iconfont字體圖標this
一、官網下載解壓,將解壓後的文件所有放到assets目錄下建iconfont目錄下spa
二、在main.js裏面全局導入,而後就能夠用了。用的時候class前面須要加上iconfontcode
import './assets/iconfont/iconfont.css'
3、form表單自定義驗證規則orm
驗證手機號(我是獨立寫了一個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>