今天小编给大家分享一下怎么用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实现折叠与展开组件”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。