这篇文章主要为大家详细介绍了vue+antd实现折叠与展开组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
最近在写前台页面,遇到一个需求,如下:点击头部标题,如果有内容,则展开,否则不展开,其实就是展开与折叠的组件。效果图如下:
由于其它地方也需要实现这种功能,所以,需要封装成一个组件。
代码如下:
1. 父页面代码
1.1 变量:open:表示现在的状态,true是展开,false为折叠
1.2 变量:height:表示折叠时的高度,也就是根据标题的高度来的。
1.3 插槽:在组件中写的内容是一个插槽,可以预知组件内有个
常规工艺 产品类型:常规 板子大小:常规 出货方式:常规 交货数量:11
1.4 组件引入
import openCloseBox from './modules/openCloseBox.vue'; export default { name: 'index', components: { openCloseBox, }, }
2. 组件代码
完成!!
其它地方引用的效果如下:
展开效果:
折叠效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持0133技术站。
以上就是vue+antd实现折叠与展开组件的详细内容,更多请关注0133技术站其它相关文章!