一. 大致的使用方法
內容2內容3
二. 完成最外部的樣式
//collapse
三. 進一步調節樣式// collapse-item
四. 預設內容摺疊起來和點選切換,基本樣式和基本功能完成五. 完善功能第乙個點開,第二個就關閉// collapse-item
data ()
}
六. 增加功能是否可以選擇多個mounted()
})},
methods:else
},close()
}
七. 可以設定預設 selected// 新增single選項,有single就注入,沒有就不注入
// 但是這種方式不太完美會有警告
props:
},provide() }}
// index.html
內容2內容3
// collapse-item.vue
mounted()else
})},
八. 回頭解決子元素是否可以多個開啟
9.進一步修改,把選中的值改為陣列// index.js
內容2 lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquid cupiditate dolore d!
內容3 lorem ipsum dolor sit amet, consectetur adipisicing elit. excepturi, magnam.
}// collapse.vue
mounted())
this.$children.foreach((vm)=>)
}// collapse-item.vue
mounted()
}else
})},
10. 將所有資料流讓父元件統一管理。// collapse.vue
mounted())
this.eventbus.$on('update:removeselected', (name)=>)
this.$children.foreach((vm)=>)
}// collapse-item.vue
methods:else},}
11. 資料流的核心// collapse.vue
mounted()else
this.eventbus.$emit('update:selected',selectedcopy) // 通知兒子
this.$emit('update:selected',selectedcopy) // 通知外面
})this.eventbus.$on('update:removeselected', (name)=>)
this.$children.foreach((vm)=>)
}
// collapse.vue 爸爸
mounted()else
this.eventbus.$emit('update:selected',selectedcopy) // 得到最新被選中的item之後,通知兒子
this.$emit('update:selected',selectedcopy) // 通知外面
})this.eventbus.$on('update:removeselected', (name)=>)
this.$children.foreach((vm)=>)
}¡// collapse-item.vue 兒子
Vue實現手風琴效果
筆者在2年前曾用jquery寫過乙個手風琴元件,jquery提供的slideup slidedown方法簡直就是給手風琴量身定做的,不僅能夠獲得內容的高度並正確開啟,還能加上流暢的動畫效果,這裡動畫效果請小夥伴們自行腦部一下哈 然而兩年後的今天。需要在vue中來做了,筆者是對 有潔癖的人,不想使用j...
手風琴效果
今天寫了乙個類似手風琴的效果,基於jquer,貼出來分享,生命在於折騰,加油。function imgshowleft else 3000 imgshowleft li on mouseover function if this hasclass active imgshowleft li on m...
手風琴案例
lang en charset utf 8 title type text css ul parentwrap menugroup grouptitle menugroup div style src js jquery 1.12.4.js script head class parentwrap ...