vue怎么实现手风琴效果_手风琴效果 递归组件实战（vue）

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 de