vue+antd实现折叠与展开组件

最近在写前台页面,遇到一个需求,如下:点击头部标题,如果有内容,则展开,否则不展开,其实就是展开与折叠的组件。效果图如下:

vue+antd实现折叠与展开组件_第1张图片

由于其它地方也需要实现这种功能,所以,需要封装成一个组件。

代码如下:

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. 组件代码





完成!!

其它地方引用的效果如下:

展开效果:

vue+antd实现折叠与展开组件_第2张图片

折叠效果:

vue+antd实现折叠与展开组件_第3张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(vue+antd实现折叠与展开组件)