您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 208人已围观

简介 vue+antd实现折叠与展开组件_vue.js_

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

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

代码如下：

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,    }, }

完成！！

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

展开效果：

折叠效果：

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

您可能感兴趣的文章:

上一篇：vue实现图片滑动验证功能_vue.js_