摘要：封裝組件系列文章如何實(shí)現(xiàn)一個(gè)這樣的級(jí)聯(lián)組件組件背景根據(jù)產(chǎn)品原型實(shí)現(xiàn)一個(gè)級(jí)聯(lián)組件，下面看演示圖應(yīng)用場景很多，如后臺(tái)管理系統(tǒng)，旅游系統(tǒng)，廣告投放系統(tǒng)，營銷系統(tǒng)等，現(xiàn)在流行，，三大框架，下面看看怎么使用實(shí)現(xiàn)實(shí)現(xiàn)邏輯產(chǎn)品經(jīng)理的評(píng)審功能需求如下根據(jù)大

Vue封裝組件系列文章

如何實(shí)現(xiàn)一個(gè)這樣的級(jí)聯(lián)組件

根據(jù)產(chǎn)品原型實(shí)現(xiàn)一個(gè)級(jí)聯(lián)組件，下面看演示圖

應(yīng)用場景很多，如：后臺(tái)管理系統(tǒng)，旅游系統(tǒng)，廣告投放系統(tǒng)，營銷系統(tǒng)...等，現(xiàn)在流行Vue，React ， Anagular 三大框架，下面看看怎么使用Vue實(shí)現(xiàn)

產(chǎn)品經(jīng)理的評(píng)審功能需求如下

根據(jù)大分類到子分類層級(jí)選擇，無層級(jí)限制（根據(jù)UI的橫板寬度，適合做多級(jí)，但深度很深的場景并不多）

每個(gè)層級(jí)支持全選，根據(jù)子級(jí)可以推導(dǎo)全選項(xiàng)選中，并對(duì)其父級(jí)執(zhí)行選中操作

已選層級(jí)可顯示出結(jié)果列表，可對(duì)其結(jié)果操作，并有快速清空結(jié)果功能

分類名稱字?jǐn)?shù)并不做限制，待選區(qū)域分類名稱應(yīng)在該項(xiàng)中居中顯示，長度過長換行顯示

結(jié)果選項(xiàng)結(jié)構(gòu)簡化，每項(xiàng)固定一行，過長在尾部出現(xiàn)...代表過長，鼠標(biāo)移上時(shí)顯示全部內(nèi)容

Vue.js 的核心包括一套“響應(yīng)式系統(tǒng)”。

"響應(yīng)式"，開發(fā)思路跟Jquery的開發(fā)思路完全不同。

“響應(yīng)式”，是指當(dāng)數(shù)據(jù)改變后，Vue 會(huì)通知到使用該數(shù)據(jù)的代碼。例如，視圖渲染中使用了數(shù)據(jù)，數(shù)據(jù)改變后，視圖也會(huì)自動(dòng)更新。

根據(jù)地區(qū)數(shù)據(jù) JSON 可以看出其結(jié)構(gòu)

[
  {
    "value": "中國",
    "key": 1156,
    "id": 1156,
    "children": [
      {
        "value": "北京市",
        "id": 10000,
        "key": 10000,
        "children": []
      },
      {
        "value": "河北省",
        "key": 200107,
        "id": 200107,
        "children": [
          {
            "value": "石家莊",
            "key": 20010701,
            "id": 20010701
          },
          {
            "value": "唐山市",
            "key": 20010702,
            "id": 20010702,
            "children": [
               {
                  "value": "路南區(qū)",
                  "key": 2001070201,
                 "id": 2001070201,
                  "children": []
               }
            ]
          }
        ]
      }
    ]

中國

直轄市

xx省

xx市

xx區(qū)

xx市

xx縣

這是一個(gè)循環(huán)嵌套的數(shù)據(jù)對(duì)象，而組件嵌套似乎不能滿足產(chǎn)品需求，如果使用數(shù)組來代替層級(jí)，似乎可以解決數(shù)據(jù)嵌套的問題

array => level 1 -> level 2 -> level 3 -> level 4

level 1 => current， children => level 2 (array)
level 2 => current， children => level 3 (array)
...

每個(gè)level 都是一個(gè)整體，
有標(biāo)題 title
有全選 計(jì)算data中是否都選中 select
子集的集合數(shù)據(jù) data
有當(dāng)前選中 current
標(biāo)記當(dāng)期層級(jí) 數(shù)組的索引  level

首先定義個(gè)空的數(shù)組代表組件

const array = []

把數(shù)據(jù)處理成數(shù)組格式就能展開這個(gè)組件，那怎么處理數(shù)據(jù)呢
初始化組件時(shí)不是所有都顯示，必須讓用戶選擇當(dāng)前一個(gè)頂級(jí)大類

拿到所有頂級(jí)大類，并構(gòu)建第一個(gè)元素

title = 省級(jí)
data = 頂級(jí)大類
current = 空
level = 1
select = false

array.push({title, select, data, current, level})

在選擇頂級(jí)大類時(shí)，給這個(gè)數(shù)組增加其一個(gè)子集元素

array.push({title, select, data, current, level})
...

依次類推

獲取組件的選擇結(jié)果，
可以過濾數(shù)據(jù)的check 屬性得到，
可使用Vue的計(jì)算屬性得知隨時(shí)的結(jié)果

結(jié)果選擇框可以直接綁定已選的計(jì)算組件，可構(gòu)建結(jié)果UI

主組件

布局組件

選擇項(xiàng)

用來負(fù)責(zé)組件框架， 左右分欄，
左邊是選擇區(qū)域， 右邊是結(jié)果區(qū)域
這個(gè)是組件引用層，統(tǒng)一對(duì)外提供導(dǎo)入props 數(shù)據(jù) 和 導(dǎo)出的 emit 事件
組件需要做到完全配置化，內(nèi)部所以參數(shù)需要被抽象

選擇區(qū)

更具層級(jí)平均分配空間，所有在橫向固定空間中，不能做過多的層級(jí)，太窄了沒法顯示
因?yàn)樾枰h(huán)顯示其層級(jí)，抽離層級(jí)為布局組件，布局組件由 標(biāo)題 和 滾動(dòng)的選擇區(qū)域 組成

結(jié)果區(qū)

在有選擇時(shí)才顯示，有標(biāo)題欄顯示，結(jié)果區(qū)可統(tǒng)計(jì)結(jié)果個(gè)數(shù)，選擇項(xiàng)使用Tag標(biāo)簽，支持快速刪除，建立縱向滾動(dòng)條
可使用布局組件 與選擇區(qū)保持風(fēng)格統(tǒng)一，

要兼容選擇區(qū)與結(jié)果區(qū)使用，所以統(tǒng)計(jì)個(gè)數(shù)得有開關(guān)控制，
邊框，顏色 UI 控制

抽象 清空按鈕UI
抽象 統(tǒng)計(jì)個(gè)數(shù)UI

最關(guān)鍵的組件就算這個(gè)了

v-model 綁定數(shù)據(jù)的好處是： 數(shù)據(jù)在內(nèi)部發(fā)生了改變，而在原始端同樣改變了，只要使用就可以了，
當(dāng)然在使用上也有些不方便的地方，
props導(dǎo)入的數(shù)據(jù)，通過什么props 屬性接收呢， value

...
props: {
  value: {
    type: Array
  }
}
...

在組件內(nèi)部是不能Set 改變的，只能通過事件傳到父組件中來
通過什么方法名來傳呢， input (初級(jí)很多人不知道)
this.$emit("input", val)

在初始化過程中，構(gòu)建第一層級(jí)組件的 title data current level
假使省市json 數(shù)據(jù)為 cityJson 構(gòu)建第一層級(jí)的data

const data = this.cityJson.map(ret => {
  delete ret.children
  return ret
})

當(dāng)用戶選擇層級(jí)的 item 時(shí)觸發(fā) 動(dòng)作新增層級(jí)數(shù)據(jù)
當(dāng)用戶選中層級(jí)的 item 時(shí)觸發(fā) 動(dòng)作新增層級(jí)數(shù)據(jù) 選中該層級(jí)下所有數(shù)據(jù)

貼上所有源代碼，難免里面有些引用的文件，如果不能直接使用，請(qǐng)不要噴，因?yàn)檫@篇文章不是送個(gè)伸手黨的，是你有一定的基礎(chǔ)，想提升一下技能的你

半選功能

在一個(gè)大分類的子分類里選擇的分類，但是切到別的大類項(xiàng)，雖然結(jié)果框里有選擇的分類，但是待選的框里還是不能顯示子集，需求上線后，客戶反應(yīng)體驗(yàn)不好，所以就研究了復(fù)選框的 半選狀態(tài)，其實(shí)改起來很簡單，只要在計(jì)算屬性的加個(gè)布爾值顯示半選，布爾值就是該分類的data里是否有選中的項(xiàng)check = true

行內(nèi)文本過長，換行顯示優(yōu)化
因?yàn)榉诸惖淖謹(jǐn)?shù)沒有限制，做前端其實(shí)不能相信用戶，同時(shí)也不能相信后端返回給的數(shù)據(jù)，也不能相信產(chǎn)品，在產(chǎn)品沒有碰到過字?jǐn)?shù)限制的功能時(shí)候產(chǎn)生的問題時(shí)，都是期待著用戶是個(gè)正常的用戶的。

文本過長有兩種方式解決：

在文本區(qū)域設(shè)置固定寬度，在超過長度顯示... （如果要顯示全，只能增加鼠標(biāo)懸停顯示功能了）

在item 行的高度不使用line-height的參數(shù)，用padding 做上下間隔后，讓文本自動(dòng)換行 （這樣的問題是，右手邊圖標(biāo)的居中問題，字?jǐn)?shù)太多就會(huì)加高item項(xiàng)，美觀度沒那么統(tǒng)一）

很多前端新人都接觸Vue一年、甚至兩年多才會(huì)使用像element ui、iview、vant開源的UI基礎(chǔ)庫，但細(xì)心的你可能發(fā)現(xiàn)，這些只適合參照原型圖實(shí)現(xiàn)html編碼，但業(yè)務(wù)的層次抽離、邏輯的復(fù)用、組件化業(yè)務(wù)層方面都沒有手把手教我們上路。

三大流行框架的核心是快速地組件化開發(fā)，而我們只是簡單的在路由組件頁面堆積UI庫的組件嗎，顯然這不是我們想要的高效開發(fā)。一個(gè)項(xiàng)目可以大到100多個(gè)頁面，如果不抽離組件，重復(fù)工作量不可預(yù)估，效率更是談不上了。那么如何像作者一樣能更深層次使用Vue呢，其實(shí)element ui的開源庫，每一個(gè)組件的實(shí)現(xiàn)其實(shí)都是很基礎(chǔ)的方法實(shí)現(xiàn)的，假如你要實(shí)現(xiàn)這樣的基礎(chǔ)庫，你就會(huì)想辦法去看源代碼，看著看著你就學(xué)會(huì)了作者的很多思想，那還會(huì)有什么的組件實(shí)現(xiàn)不了了？

師傅領(lǐng)進(jìn)門，修行靠個(gè)人，人人都是我們的老師。不知你是否贊成...

以上，歡迎拍磚~

歡迎關(guān)注我的開源倉庫
GITHUB：xiejunping (Cabber) · GitHub
微信二維碼： 掃碼添加好友，交個(gè)朋友