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

最近有个需求就是用vue封装一个类似element 的展开/收起的组件,像下图这种
【Vue】如何利用vue封装一个可展开/收起的组件
自己可以写demo,但是不会封装,望前辈们指教指教,如果能贴个示例代码的话,万分感谢~!

回答

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

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

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

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>

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

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

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

以上是 【Vue】如何利用vue封装一个可展开/收起的组件 的全部内容, 来源链接: utcz.com/a/77531.html

回到顶部