Vue开源库iview中折叠面板

   首先,整个Collapse组件统一由collapse.vue管理,它的模板中包含一个插槽,给每一个面板提供空间,同时collapse.vue是整个组件的管理者,它将决定面板的显示状态(即:在collapse.vue文件中修改panel的数据)。

Vue开源库iview中折叠面板_第1张图片

   而panel.vue只需要通过数据来驱动DOM(这也正是vue的精髓所在),在panel.vue文件中只需要在标题的div上添加上一个点击事件,调用它的父组件collapse中的函数,并将点击的panel的name和状态发送给collapse即可

Vue开源库iview中折叠面板_第2张图片

简单的介绍一下关键的思想,想要了解全部的过程, https://github.com/yanggreater/vue-personal-components/tree/master/Collapse,具体的解释都有,欢迎前来

 

你可能感兴趣的:(前段框架)