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 值，強制更新組件，通常能夠解決問題。

關於我

一個一年小前端，關注個人微信公衆號，和我一塊兒交流，我會盡我所能，而且看看我能成長成什麼樣子吧。交個朋友吧！