如何利用vue封装一个可展开/收起的组件

Question

最近有个需求就是用vue封装一个类似element 的展开/收起的组件，像下图这种

自己可以写demo，但是不会封装，望前辈们指教指教，如果能贴个示例代码的话，万分感谢~！

Answer 1

笔试题还是猎头哦，一般人也不会有这种需求。。。
个人拙见：
把几个常用的功能留作 prop 嘛，比如展开按钮的文本、比如你这个 gif 里面，hover 的时候要不要动画啥的
再者就是把需要折叠的和不需要折叠的放到单独的两个具名插槽里，也方便维护
最后封装成插件嘛 https://cn.vuejs.org/v2/guide...

Answer 2

利用slot插槽，把你需要隐藏的内容放在插槽里，通过v-show控制那个插槽的显隐

Answer 3

楼上已经回答了就是用插槽

Vue.component('upDown',{
    template:'<div><transition name="fade"><div v-show="status"><slot></slot></div></transition><button @click="toggle">{{status?"收起":"展开"}}</button></div>',
    data(){
        return {
            status:false
        }
    },
    methods:{
        toggle(){
            this.status = !this.status
        }
    }
})

<upDown>这是内容</upDown>

Answer 4

这个就是给简单的 v-show 控制组件展示和隐藏啊....
你写HTML的时候把节点想成成默认展开的形式去写就好
完成之后在需要隐藏的地方加个 v-show 就好
要动画效果加个 translation 并且自己去手写动画或是引用库什么的

唯一难点的可能就是实时检测prop的变化（但是这个例子有很多）

自用的话也不用考虑太多
满足自己需求即可