国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何實現一個這樣的級聯組件

daydream / 3759人閱讀

摘要：封裝組件系列文章如何實現一個這樣的級聯組件組件背景根據產品原型實現一個級聯組件，下面看演示圖應用場景很多，如后臺管理系統，旅游系統，廣告投放系統，營銷系統等，現在流行，，三大框架，下面看看怎么使用實現實現邏輯產品經理的評審功能需求如下根據大

Vue封裝組件系列文章

如何實現一個這樣的級聯組件

組件背景

根據產品原型實現一個級聯組件，下面看演示圖

應用場景很多，如：后臺管理系統，旅游系統，廣告投放系統，營銷系統...等，現在流行Vue，React ， Anagular 三大框架，下面看看怎么使用Vue實現
實現邏輯

產品經理的評審功能需求如下

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

每個層級支持全選，根據子級可以推導全選項選中，并對其父級執行選中操作

已選層級可顯示出結果列表，可對其結果操作，并有快速清空結果功能

分類名稱字數并不做限制，待選區域分類名稱應在該項中居中顯示，長度過長換行顯示

結果選項結構簡化，每項固定一行，過長在尾部出現...代表過長，鼠標移上時顯示全部內容

思路

Vue.js 的核心包括一套“響應式系統”。

"響應式"，開發思路跟Jquery的開發思路完全不同。

“響應式”，是指當數據改變后，Vue 會通知到使用該數據的代碼。例如，視圖渲染中使用了數據，數據改變后，視圖也會自動更新。

根據地區數據 JSON 可以看出其結構

[
  {
    "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": "路南區",
                  "key": 2001070201,
                 "id": 2001070201,
                  "children": []
               }
            ]
          }
        ]
      }
    ]

中國

直轄市

xx省

xx市

xx區

xx市

xx縣

待選數據組件

這是一個循環嵌套的數據對象，而組件嵌套似乎不能滿足產品需求，如果使用數組來代替層級，似乎可以解決數據嵌套的問題

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

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

每個level 都是一個整體，
有標題 title
有全選 計算data中是否都選中 select
子集的集合數據 data
有當前選中 current
標記當期層級 數組的索引  level

首先定義個空的數組代表組件

const array = []

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

拿到所有頂級大類，并構建第一個元素

title = 省級
data = 頂級大類
current = 空
level = 1
select = false

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

在選擇頂級大類時，給這個數組增加其一個子集元素

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

依次類推

結果選擇器

獲取組件的選擇結果，
可以過濾數據的check 屬性得到，
可使用Vue的計算屬性得知隨時的結果

結果選擇框可以直接綁定已選的計算組件，可構建結果UI

組件構想

主組件

布局組件

選擇項

主組件 Selecter

用來負責組件框架， 左右分欄，
左邊是選擇區域， 右邊是結果區域
這個是組件引用層，統一對外提供導入props 數據 和 導出的 emit 事件
組件需要做到完全配置化，內部所以參數需要被抽象

選擇區

更具層級平均分配空間，所有在橫向固定空間中，不能做過多的層級，太窄了沒法顯示
因為需要循環顯示其層級，抽離層級為布局組件，布局組件由 標題 和 滾動的選擇區域 組成

結果區

在有選擇時才顯示，有標題欄顯示，結果區可統計結果個數，選擇項使用Tag標簽，支持快速刪除，建立縱向滾動條
可使用布局組件 與選擇區保持風格統一，

布局組件 item

要兼容選擇區與結果區使用，所以統計個數得有開關控制，
邊框，顏色 UI 控制

抽象 清空按鈕UI
抽象 統計個數UI

選擇項 box（子組件）

最關鍵的組件就算這個了

邏輯 雙向綁定

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

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

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

原始數據構建選擇層級組件

在初始化過程中，構建第一層級組件的 title data current level
假使省市json 數據為 cityJson 構建第一層級的data

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

當用戶選擇層級的 item 時觸發 動作新增層級數據
當用戶選中層級的 item 時觸發 動作新增層級數據 選中該層級下所有數據

全選 清空 刪除 代碼

貼上所有源代碼，難免里面有些引用的文件，如果不能直接使用，請不要噴，因為這篇文章不是送個伸手黨的，是你有一定的基礎，想提升一下技能的你

主組件 Selecter
布局組件 item
選擇項（子組件）box
優化體驗

半選功能

在一個大分類的子分類里選擇的分類，但是切到別的大類項，雖然結果框里有選擇的分類，但是待選的框里還是不能顯示子集，需求上線后，客戶反應體驗不好，所以就研究了復選框的 半選狀態，其實改起來很簡單，只要在計算屬性的加個布爾值顯示半選，布爾值就是該分類的data里是否有選中的項check = true

行內文本過長，換行顯示優化
因為分類的字數沒有限制，做前端其實不能相信用戶，同時也不能相信后端返回給的數據，也不能相信產品，在產品沒有碰到過字數限制的功能時候產生的問題時，都是期待著用戶是個正常的用戶的。

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

在文本區域設置固定寬度，在超過長度顯示... （如果要顯示全，只能增加鼠標懸停顯示功能了）

在item 行的高度不使用line-height的參數，用padding 做上下間隔后，讓文本自動換行 （這樣的問題是，右手邊圖標的居中問題，字數太多就會加高item項，美觀度沒那么統一）

經驗總結

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

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

師傅領進門，修行靠個人，人人都是我們的老師。不知你是否贊成...

以上，歡迎拍磚~

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105745.html

相關文章

  • 從零開始實現一個Vue級聯組件

    摘要：從零開始實現一個級聯組件本文實現級聯組件需要用到自定義指令和組件通信相關知識，最好先閱讀以下兩篇文章自定義指令組件基礎與通信一組件簡介本文實現的是一個省市縣多級聯動組件，當組件渲染完成后默認會加載出所有的省名稱，當用戶點擊某個省的名稱后，右 從零開始實現一個Vue級聯組件 本文實現級聯組件需要用到自定義指令和組件通信相關知識，最好先閱讀以下兩篇文章: Vue自定義指令 Vue組件基礎與...

    binaryTree 評論0 收藏0

  • Mybatis N+1問題解析

    摘要：問題解析因為熱愛，所以拼搏。如何解決問題本身給出解決方案，就是延遲加載。延遲加載延遲加載會解決上述的問題，也就是在個級聯表的情況下，只加載需求的數據庫表數據。在特定的關聯中，使用屬性覆蓋該內容的功能。 Mybatis N+1問題解析 因為熱愛，所以拼搏。 --RuiDer 前導必備 Mybatis 數據庫 級聯 N+1問題？？ N+1問題來源于數據庫中常見的...

    qqlcbb 評論0 收藏0

  • Python-SQLAlchemy：第4節：級聯

    摘要：上一篇文章第節關系操作級聯是在一對多關系中父表與子表進行聯動操作的數據庫術語。注意級聯獨立于本身針對外鍵的級聯定義。代碼執行后數據庫表中的內容的變化表五年二班理想路號樓表理想男靜安區女靜安區小馬哥女閘口區張三韓永躍男靜安區 上一篇文章：Python-SQLAlchemy：第3節：關系操作 級聯是在一對多關系中父表與子表進行聯動操作的數據庫術語。因為父表與子表通過外鍵關聯，所以對父表或...

    henry14 評論0 收藏0

  • CSS優先級詳解

    摘要：優先級是由選擇器組成的匹配規則決定的。這些繼承的樣式的優先級永遠低于元素本身的樣式，包括通用選擇器最終的顏色是紅色的。永遠都要優先考慮使用樣式規則的優先級來解決問題而不是。 概念 瀏覽器是通過判斷優先級，來決定到底哪些屬性值是與元素最相關的，從而應用到該元素上。優先級是由選擇器組成的匹配規則決定的。 如何計算? 優先級是根據由每種選擇器類型構成的級聯字串計算而成的. 它不是一個對...

    Juven 評論0 收藏0

  • CSS優先級詳解

    摘要：優先級是由選擇器組成的匹配規則決定的。這些繼承的樣式的優先級永遠低于元素本身的樣式，包括通用選擇器最終的顏色是紅色的。永遠都要優先考慮使用樣式規則的優先級來解決問題而不是。 概念 瀏覽器是通過判斷優先級，來決定到底哪些屬性值是與元素最相關的，從而應用到該元素上。優先級是由選擇器組成的匹配規則決定的。 如何計算? 優先級是根據由每種選擇器類型構成的級聯字串計算而成的. 它不是一個對...

    n7then 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<