今天小编给大家分享一下怎么用vue+antd实现折叠与展开组件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
效果图如下:
由于其它地方也需要实现这种功能,所以,需要封装成一个组件。
代码如下:
1.1 变量:open:表示现在的状态,true是展开,false为折叠
1.2 变量:height:表示折叠时的高度,也就是根据标题的高度来的。
1.3 插槽:在组件中写的内容是一个插槽,可以预知组件内有个<slot></slot>来接收外部的内容
<openCloseBox :open="true" :height="40"> <div class="card_tit"> <a-icon type="minus" /><span class="tab_tit">常规工艺</span> </div> <div class="card_con"> <a-row> <a-col :span="12">产品类型:常规</a-col> <a-col :span="12">板子大小:常规</a-col> <a-col :span="12">出货方式:常规</a-col> <a-col :span="12">交货数量:11</a-col> </a-row> </div> </openCloseBox>
1.4 组件引入
import openCloseBox from './modules/openCloseBox.vue'; export default { name: 'index', components: { openCloseBox, }, }
<template> <div class="openclose-box" :class="{ 'openclose-card-open': isOpen && card, 'openclose-card-close': !isOpen && card, 'openclose-box-open': isOpen && !card, 'openclose-box-close': !isOpen && !card, }" : > <div class="openclose-btn" :class="{ 'openclose-btn-box': !card }" @click="isOpen = !isOpen" ></div> <a-card v-if="card"> <slot></slot> </a-card> <slot v-else></slot> </div> </template> <script> export default { name: 'OpenCloseBox', props: { open: { type: Boolean, default: false, }, card: { type: Boolean, default: false, }, height: { type: Number, default: 60, }, }, data() { return { isOpen: this.open, }; }, }; </script> <style lang="less" scoped> .openclose-box { position: relative; /deep/ .ant-card-body { padding: 20px 18px; } .openclose-btn { font-size: 14px; line-height: 16px; color: #333; width: 100%; height: 56px; position: absolute; top: 0; right: 0; padding-right: 18px; display: flex; justify-content: flex-end; align-items: center; z-index: 1; user-select: none; cursor: pointer; .openclose-icon { color: #999; } &:hover { color: #f90; .openclose-icon { color: #f90; } } } .openclose-btn-box { height: 48px; } } .openclose-card-open { /deep/ .ant-card-body { height: auto; } } .openclose-card-close { /deep/ .ant-card-body { height: 56px; overflow: hidden; } } .openclose-box-open { height: auto; } .openclose-box-close { height: 60px; overflow: hidden; } </style>
完成!!
其它地方引用的效果如下:
展开效果:
折叠效果:
以上就是“怎么用vue+antd实现折叠与展开组件”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。