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"/>

form自动校验问题

使用el-form表单时进入页面时会进行自动校验。在el-form上添加这个属性就可以了

官方解释 - 是否在rules属性改变后立即触发一次验证

:validate-on-rule-change="false"

持续更新...