ElementUI文档中忽略的内容补充

前言

虽然ElementUI文档已经十分详细，可是不免会有一点点遗漏的地方。本文介绍了笔者使用Element的经验以及文档中忽略或简要介绍的内容（笔者想了很久，就写了一点点）。若是你有什么须要补充的，不妨评论区告诉我吧。

官方 FAQ

建议每个使用 ElementUI 的人都去读一读，官方也很无奈啊。有些多是被问烦了，有些仍是真的挺有用的

eg: 给组件绑定的事件为何没法触发？

在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符：<my-component @click.native="handleClick">Click Me</my-component>

从易用性的角度出发，咱们对 Button 组件进行了处理，使它能够监听 click 事件：<el-button @click="handleButtonClick">Click Me</el-button>

可是对于其余组件，仍是须要添加 .native 修饰符。

Input 实时响应用户的输入

<el-input type="text" v-model="test"  @change="change"></el-input> 复制代码

使用 change 监听时，input 框的值改变不能触发 change 事件，可是这时若是是 input 输入框失焦确能触发事件。总的来讲就是 change 事件只在 input 值改变而且失去焦点的时候才会触发，其它状况不触发事件

change 事件如今仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。若是须要实时响应用户的输入，可使用 input 事件。

详见其更新说明

Input 使用 v-model 使用修饰符

若是要自动过滤用户输入的首尾空白字符，能够给 v-model 添加 trim 修饰符：

<el-input v-model.trim="input" placeholder="请输入内容"></el-input>

想自动将用户的输入值转为数值类型，能够给 v-model 添加 number 修饰符：

<el-input type="number" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>

表单验证

ElementUI 表单验证使用async-validator，表单元素的 type 有 string，number，boolean，method，regexp，integer，float，array，object，enum，date，url，hex，email

有些仍是很经常使用的，好比 url 验证，date 验证，email验证。可是文档里面没有写，我有时候会记不住。哈哈哈。因此我写了一个表单代码生成器，这样就不用去记住了。

以及不那么经常使用的嵌套数据的验证：

'user.tel' : [{required: true, message: '手机号码不能为空', trigger: 'blur'}]

select 远程搜索组件回显

element-ui 当你的选项是固定的时候，它会基于你选中的 value，回显对应的 label，可是远程搜索组件因为options不固定，回显就是一个问题。

解决的方法就是传入已选中的值的options传入，好比我有一个组件ArticleSelect ，我选中的 id 值为 [ 1,2 ] ，若是不作处理的话，这个组件就不会回显。仅干巴巴的显示 1，2 两个 tag。可是我能够经过把选中的值的 options(值为[{value:1,label:'第一篇'},{value:2,label:'第二篇'}]) 传入这个组件，实现回显显示标题。

但，可能有人就问了，select 组件远程搜索 options 不是会随着搜索的关键词而动态变化么，为何这样能够？咱们看一下 ElementUI select 组件设置选中值的代码：

setSelected() {
    // 省略不是多选的状况的代码
    // 多选
    let result = [];
    if (Array.isArray(this.value)) {
      this.value.forEach(value => {
        // 注意到这里是push操做
        result.push(this.getOption(value));
      });
    }
    this.selected = result;
    // 设置完成以后从新计算选项框的高度
    this.$nextTick(() => {
      this.resetInputHeight();
    });
  }
复制代码

由代码可知， Element 设置 选中的值是一个 push 操做，因此 options 后续改变也不会影响我选中的值，完美解决了个人需求

自定义 element-ui 样式

这一节我是从这里抄来的，就不本身写了

CSS 命名空间

如今咱们来讲说怎么覆盖 element-ui 样式。因为 element-ui 的样式咱们是在全局引入的，因此你想在某个页面里面覆盖它的样式就不能加 scoped，但你又想只覆盖这个页面的 element 样式，你就可在它的父级加一个 class，用命名空间来解决问题。

.article-page {
  /* 你的命名空间 */
  .el-tag {
    /* element-ui 元素*/
    margin-right: 0px;
  }
}
复制代码

固然也可使用深度做用选择器 下文会介绍

父组件改变子组件样式 深度选择器

当你子组件使用了 scoped 但在父组件又想修改子组件的样式能够，经过 >>> 来实现：

<style scoped>
.a >>> .b { /* ... */ }
</style>
复制代码

将会编译成

.a[data-v-f3f3eg9] .b {
  /* ... */
}
复制代码

若是你使用了一些预处理的东西，如 sass 你能够经过 /deep/ 来代替 >>> 实现想要的效果。

因此你想覆盖某个特定页面 element 的 button 的样式，你能够这样作：

.xxx-container >>> .el-button{
  xxxx
}
复制代码

终极技巧

若是有时候你不幸遇到了 ElementUI 的 bug（虽然大部分状况是你本身的问题），给组件添加 key，更新 key 值，强制更新组件，通常能够解决问题。

关于我

一个一年小前端，关注个人微信公众号，和我一块儿交流，我会尽我所能，而且看看我能成长成什么样子吧。交个朋友吧！