Element-ui使用技巧

使用第三方字體包

把下載後的*.zip字體包放到項目中在main.js中引用。

import "@/assets/font/iconfont.css";

注意必定要放到element-variables.scss後面

使用

<el-input prefix-icon="iconfont el-icon-erp-lock" type="password"></el-input>

表單校驗使用正則表達式

<el-form-item prop="mobile">
    <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="請輸入手機號"></el-input>
</el-form-item>

在校驗規則使用pattern屬性便可。

mobile: [
    { validator: validateMobile, trigger: 'blur' },
    { required: true, message: '請輸入手機號', trigger: 'blur' },
    { pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機號碼' }
]

使用element滾動條

Element-ui 暴露出來了，滾動條組件，在使用的時候，須要給父元素固定高度，通常使用定位就行了，可是.el-scrollbar__wrap這個clsss的樣式設置成了overscroll:scroll，底部會出現一個默認的滾動條樣式，要使用新的樣式覆蓋掉原有樣式。

以下：

<el-scrollbar class="el-scroll-style" :native="true">
      <slot></slot>
</el-scrollbar>

class樣式

.el-scroll-style {
   top:70px;
   left:0px;
   right:0px;
   bottom:0px;
   position: absolute;
   overflow-x:hidden;
   .el-scrollbar__wrap {
        overflow-y:scroll;
        overflow-x:hidden;
    }
}

組件使用enter事件

<el-input placeholder="請輸入內容" @keyup.enter.native="login"/>

持續更新...