如何用Vue和Ant Design实现折叠展开功能组件？

本文共计778个文字，预计阅读时间需要4分钟。

在编写前端页面时，遇到一个需求：点击头部，若内容存在则展开，不存在则不展开。这实际上是一个展开与折叠组件的功能。效果如下：点击，内容区域会相应展开或折叠。由于其他地方也需要实现类似功能，所以需要实现这一需求。

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

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

代码如下：

1. 父页面代码

1.1 变量：open：表示现在的状态，true是展开，false为折叠

1.2 变量：height：表示折叠时的高度，也就是根据标题的高度来的。