[[436888]]

 前端開發(fā)的同學(xué)們或許會(huì)遇到這樣的問題：產(chǎn)品中需要實(shí)現(xiàn)某項(xiàng)功能，常用的 elementui、antd 等組件庫中確實(shí)有差不多功能的組件。但實(shí)際上這些組件可能并不能滿足你的功能，或多或少都需要你去看看如何修改它才能滿足你的需求。

比如我曾遇到過 element-ui 中的「樹形控件」暴露出的參數(shù)沒有我需要的（獲取參數(shù)）；或者是「對話框」組件我需要給它的 body 加上上下兩條 border 等（樣式修改）；還有「級聯(lián)選擇器」的多選可搜索功能：需要修改級聯(lián)看板使它保持展開，且當(dāng)子節(jié)點(diǎn)全部選中時(shí)，不展示全部子節(jié)點(diǎn) tag 而只展示它的父節(jié)點(diǎn) tag（源碼無此功能）。

例如，我需要的功能是左二（因?yàn)槲也幌脒x項(xiàng)過多時(shí) tag 占得位置太大），而原組件如左一。我截了兩張圖對比：

關(guān)于組件庫可能要修改的地方，我將它們分為以下五類可供參考：

•  樣式問題
•  組件暴露的參數(shù)和方法不充分（源碼中存在）
•  可利用部分功能，其余功能要自己開發(fā)封裝
•  2+ 個(gè)組件之間的聯(lián)動(dòng)，多合一
•  完全沒有符合的組件

下面詳細(xì)說說這些問題，以及如何解決這些問題。如果有不滿足或更好的建議，歡迎指出。

1、組件樣式問題

當(dāng)修改單個(gè)文件的樣式時(shí)，以 less 為例，如果你想要修改組件的樣式，可以使用 /deep/ 或 >>> 來深度選擇到你要修改的樣式（這能夠幫你省去一大串的類名）。 

.dialog-wrapper {  
    /deep/.el-dialog__body{  
     border: solid 1px #999;  
    }  
} 

如果你要修改全局的樣式，第一種方法，你可以在全局樣式文件中寫樣式覆蓋，引入到 main.js 中即可全局生效。如下： 

import "./assets/css/index.css"; 

第二，跟著組件庫提供的『自定義主題』教程修改，一般組件庫都會(huì)給出相關(guān)的教程。

2、組件暴露的參數(shù)和方法不充分

首先提出一個(gè)問題，你如何知道組件暴露的參數(shù)和方法不充分？其實(shí)答案很簡單：因?yàn)槲铱戳私M件庫的源碼。

當(dāng)我們想要獲取組件的一個(gè)參數(shù)，首先是看文檔中提供了哪些 Attributes、Events、Methods。如果符合需求，直接拿來用就好。如果沒有你要的屬性和方法，請你先去看看源碼中提供了哪些東西沒有向外暴露出來的，但是我們能拿來用的。

舉個(gè)🌰，上述的「Cascader 級聯(lián)選擇器」，我想要在選中一個(gè)搜索的選項(xiàng)后不關(guān)閉看板。我在組件的 Events、Methods中沒有找到相關(guān)的方法控制看板展開，如下：

img

但當(dāng)我去 github 上看該組件的源碼時(shí)，我發(fā)現(xiàn) toggleDropDownVisible() 方法是控制看板展開的。于是我在外部用 $refs 直接調(diào)用組件里的這個(gè)方法就好了。圖片

具體調(diào)用方法如下，這樣即使方法沒有暴露出來，也可以調(diào)用它內(nèi)部的方法： 

<el-cascader  
    ref="cascader" // ref獲取組件  
    placeholder="試試搜索：指南"  
    :options="options"  
    :props="{ multiple: true }"  
    filterable></el-cascader  
    @visible-change="$refs.cascader.toggleDropDownVisible(true)"> // 調(diào)用組件及其方法 

3、可利用部分功能，其余功能要自己開發(fā)封裝

第三類其實(shí)我們用到的已經(jīng)比較少了，畢竟現(xiàn)在的組件庫已經(jīng)非常豐富了。但是這一步引起的思考確是很重要的，多看別人的源碼有助于提高自己封裝組件的水平。

當(dāng)要用到一個(gè)組件，但從頭開發(fā)這個(gè)組件既復(fù)雜又耗時(shí)，而組件庫中這個(gè)組件需要再往上加一些功能就能為你所用時(shí)，你可以考慮把組件庫的代碼拿到自己本地，修改它。

第一步你需要將組件代碼瀏覽一遍，了解它的邏輯?？纯茨阈枰邮裁创a，如果在 vue 中，使用 computed、watch，或是修改 created、mounted、methods 就能完成你的功能，那么就大膽地嘗試。

舉個(gè)🌰

在 element-ui 中，它提供的多選可搜索級聯(lián)組件有一個(gè)問題：當(dāng)用戶選中全部子節(jié)點(diǎn)時(shí)不會(huì)合并為顯示父節(jié)點(diǎn)。要想完成這個(gè)功能，在經(jīng)歷過上述步驟一番探索后發(fā)現(xiàn)還是要修改源碼才能完成。于是我基于原本多選可搜索的級聯(lián)選擇器，進(jìn)行以下優(yōu)化：

•  默認(rèn)看到級聯(lián)看板展開，不會(huì)收起 

@visible-change="blurCascader(true)" // 可觸發(fā)展開  
mounted() {  
    this.blurCascader(true)  
}  
// 失焦后觸發(fā)展開級聯(lián)看板（默認(rèn)失焦后關(guān)閉看板）  
blurCascader() {  
    this.$nextTick(() => {  
        this.$refs.cascader.toggleDropDownVisible(true) // 調(diào)用組件內(nèi)部未暴露的方法  
    })  
}, 

•  搜索選中后展示級聯(lián)看板，并勾選搜索選中的節(jié)點(diǎn) 

// 響應(yīng)選中的節(jié)點(diǎn)，選中節(jié)點(diǎn)后關(guān)閉選擇看板，展示級聯(lián)看板  
changecascader(e) {  
this.$refs.cascader.handleDropdownLeave()  
}, 

•  當(dāng)子級節(jié)點(diǎn)全部選中后，tag只展示一個(gè)父級節(jié)點(diǎn)，而不是全部子節(jié)點(diǎn) 

// 獲取所有勾選的節(jié)點(diǎn)  
   getPresetTags() {  
     const tree = this.panel.menus[0]  
     const result = []  
     loop(tree)  
     // 遞歸查找選中的節(jié)點(diǎn)  
     function loop(tree = []) {  
       for (let i = 0; i < tree.length; i++) {  
         const child = tree[i]  
         if (child.checked) {                // checked 狀態(tài)表示選中  
           result.push({ ...child, closable: true })  
         } else if (child.indeterminate) {   // indeterminate 狀態(tài)表示待定，是半選  
           child.children && loop(child.children)  
         }  
       }  
     }  
     this.presentFormatTags = result // 得到可顯示的 tag  
   }, 

•  刪除節(jié)點(diǎn)

由于我修改了 tag 的展示，所以它的 deleteTag 事件也要重寫。 

deleteTag(index, tag) {  
      let _ = this  
      if (tag && tag.hasChildren) {  
       // 當(dāng)刪除的節(jié)點(diǎn)是父節(jié)點(diǎn)時(shí)  
        loop(tag.children)  
        function loop(list) {  
          for (let i = 0; i < list.length; i++) {  
            if (list[i].hasChildren) {  
              loop(list[i].children)  
            } else {  
              __.checkedValue = _.checkedValue.filter(n => n !== list[i].path)  
              _.$emit('remove-tag', tag)  
            }  
          }  
        }  
      } else if (tag) {  
      // 當(dāng)刪除的是子節(jié)點(diǎn)時(shí)  
        thisthis.checkedValue = this.checkedValue.filter((n, i) => n !== tag.path)  
        this.$emit('remove-tag', tag)  
      } else {  
      // 當(dāng)以回車鍵刪除時(shí)  
        const temp = this.presentFormatTags[this.presentFormatTags.length - 1]  
        temp && this.deleteTag(null, temp)  
      }  
      // 原本這個(gè)方法的代碼如下  
      // const { checkedValue } = this  
      // const val = checkedValue[index]  
      // this.checkedValue = checkedValue.filter((n, i) => i !== index)  
      // this.$emit('remove-tag', val) 
    } 

其實(shí)修改組件庫代碼的過程并不難，主要是看懂它的邏輯，以及其中哪些東西是你可以用的。

上述組件的源碼可以在 GitHub[1] 查看。

4、2+ 個(gè)組件之間的聯(lián)動(dòng)，多合一

到這一步，其實(shí)你已經(jīng)翻越最難的大山了！而這里要說的多個(gè)組件之間的聯(lián)動(dòng)其實(shí)已經(jīng)處于優(yōu)化用戶體驗(yàn)的道路上了。思考一下，什么時(shí)候會(huì)用到多個(gè)組件之間的聯(lián)動(dòng)呢？

其實(shí)場景有很多，例如將「Form 表單」、「Table 表格」和「Pagination 分頁」結(jié)合起來，封裝成一個(gè)組件，這樣在多表格的項(xiàng)目中直接使用就好了；

將 table 和 pagination 放到一個(gè)組件中： 

<template lang="pug">  
div  
  .el-table  
    template(v-for="(item, index) in columns")  
      el-table-column(  
        :prop="item.prop"  
        :key="index"  
        :label="item.label")  
  el-pagination.pg-wrapper(  
    layout="total, sizes, prev, pager, next, jumper"  
    @size-change="handleSizeChange"  
    @current-change="handleCurrentChange"  
    :current-page="currentPage"  
    :page-sizes="[10, 20, 50, 100]"  
    :page-size="pagesize"  
    :total="total") 
 </template> 

需要傳入的參數(shù)如下：列信息 columns、單頁數(shù)據(jù)量 pagesize、當(dāng)前頁碼 currentPage、表格數(shù)據(jù) tableData、數(shù)據(jù)總數(shù) total、表單查詢的參數(shù) query 等。 

props: {  
  // 列信息  
  columns: {  
    type: Array,  
    default: [],  
  }  
  // 單頁數(shù)據(jù)量  
  pagesize: {  
    type: Number,  
    default: 10, 
  },  
  // 當(dāng)前頁碼  
  currentPage: { 
    type: Number,  
    default: 1,  
  },  
  // 表格數(shù)據(jù)  
  tableData: {  
    type: Array,  
    default: [],  
  }, 
  // 數(shù)據(jù)總數(shù)  
  total: {  
    type: Number,  
    default: 1000,  
  },  
  // 獲取數(shù)據(jù)的接口  
  fetch:{  
     type: function,  
     default:() => {}  
  },  
  // 表單查詢的參數(shù)  
  query:{  
    type: Object,  
    default: () => {}  
  }  
},  
methods: {  
  // 改變當(dāng)前頁碼 currentPage 時(shí)觸發(fā)  
  handleCurrentChange: function (currentPage) {  
    this.$emit('handleChange', this.pagesize, currentPage)  
    this.fetch(this.query)  
  },  
  // 改變當(dāng)前頁 pageSize 時(shí)觸發(fā)  
  handleSizeChange: function (pageSize) {  
    this.$emit('handleChange', pageSize, this.currentPage)  
    this.fetch(this.query)  
  }  
} 

使用時(shí)我們只需要傳以上的參數(shù)就可以直接調(diào)用這兩個(gè)組件了。

還有「表格中行選中狀態(tài)數(shù)據(jù)」，與「展示數(shù)據(jù)」之間的聯(lián)動(dòng)等等，可發(fā)揮之處有很多。將他們封裝后可以大大減輕重復(fù)的工作量，特別是像后臺(tái)管理類的項(xiàng)目，頁面間相似度很高的，尤其適合這種方法。

5、完全沒有符合的組件

如果你要的組件，外部的組件庫中都沒有提供，那就自己動(dòng)手封裝一個(gè)。盡可能將你的組件變得通用，兼容。嘗試想一想你的組件是否在其他情況下也能用。另外也可以多看看別人是如何封裝組件的，這有助于你自己開發(fā)。

如果你可以將你在前端開發(fā)道路上自己封裝的組件一個(gè)個(gè)收集起來，大概率可以方便你以后相同場景下直接復(fù)用，也有助于你的代碼解耦。

總結(jié)

如果你遇到了組件庫中的組件不合適的，先考慮看看是否能利用它的方法或?qū)傩赃_(dá)到效果，再看看能否修改它的代碼達(dá)成目的。如果最后實(shí)在不行，那么就自己動(dòng)手造輪子吧！自己造的輪子記得記下來，沒準(zhǔn)以后就能用上！

最后，Vue Demo Collection[2] 這個(gè)項(xiàng)目，是我在開發(fā)過程中遇到的通用 Vue 組件的 demo 收集，包含了 Vue/CSS/Echarts 等一些可以復(fù)用的組件 ❤️，基本上我認(rèn)為可以復(fù)用的組件和代碼片段我都會(huì)記錄在這，方便自己的回顧和使用，也算是個(gè)人成長的記錄。