資訊專欄INFORMATION COLUMN
摘要：大家想想一想這個組件最終效果形成一個樹形結構里面有相同的模塊這個是手風琴組件中最小的組件單元。再次點擊節點就會開啟子樹。
show 效果 說說我的思路
數據結構
{"flag":1,"data":[{"id":1,"name":"書法類型","child":[{"id":2,"name":"硬筆"},{"id":3,"name":"軟筆"}]},{"id":4,"name":"獎品類型","child":[{"id":5,"name":"文房四寶"}]}]}
本來剛開始做的時候， 說是做個兩級的菜單， 為了加深自己的理解， 特意用遞歸組件模式開發。做成無限的。減少下次開發的代碼量。
原理：
假設本節點有childs 屬性， 就無限遞歸下去， 直到本節點沒有childs，結束遞歸。
大家想想一想：
這個組件最終效果
形成一個樹形dom結構（里面有相同的模塊 spreadComp.vue）這個是 手風琴組件 中 最小的組件單元。
里面的組件通信：
我采用 root級組件與子孫級組件通信（子孫組件的 事件 會分發到 root級組件， root 級組件通過更改自身狀態響應事件， 同時向子孫組件發送事件），相當于 中央集權， 再從中央分發.
重點 怎么知道 當前節點是展開的， 還是關閉我采用 codeList 及 "01-02-03" 代表 節點 01 、02 的樹節點是展開的， 03 是結束節點。以此類推。。。
當點擊 01-02-03 中 02節點， 02 節點 就會關閉子樹。 再次點擊 02節點 就會開啟子樹。
展開動畫 關閉動畫.. 仿照 elem 過渡動畫效果。（我感覺最難）
show 代碼 事件分發代碼// 父子事件 交互
const eventMixin = {}
eventMixin.install = (Vue, options) => {
Vue.mixin({
methods: {
// 向父組件 分發事件
sendFather (cpName , {event, playLoad}) {
// 子向父節點
let parent = this.$parent
const root = this.$root
while (parent.$options.name !== cpName && parent !== root) {
parent = parent.$parent
}
parent.$emit(event, playLoad)
},
// 向子孫組件分發事件
sendInfiniteCd(cpName, {event, playLoad}) {
// 最小組件
const sendChildMsg = (item) => {
let mainC = item.$children
mainC.map(cmp => {
// 獲取組件姓名
const name = cmp.$options.name
if (name === cpName) {
cmp.$emit(event, playLoad)
sendChildMsg(cmp)
}
return
})
}
// 初始化函數
sendChildMsg(this)
}
}
})
}
export default eventMixin
spreadComp index.vue
全部
spreadComp spreadComp.vue
{{list.name}}
{{item.name}}
{{item.name}}
spread spreadTransition.vue
// 借鑒 餓了嗎 過渡組件庫
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94726.html
摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
閱讀 3581·2019-08-30 15:55
閱讀 1379·2019-08-29 16:20
閱讀 3662·2019-08-29 12:42
閱讀 2667·2019-08-26 10:35
閱讀 1015·2019-08-26 10:23
閱讀 3412·2019-08-23 18:32
閱讀 902·2019-08-23 18:32
閱讀 2899·2019-08-23 14:55
