vue+antd實現(xiàn)折疊與展開組件

更新時間：2022年09月20日 16:09:51 作者：yehaocheng520

這篇文章主要為大家詳細介紹了vue+antd實現(xiàn)折疊與展開組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近在寫前臺頁面，遇到一個需求，如下：點擊頭部標題，如果有內容，則展開，否則不展開，其實就是展開與折疊的組件。效果圖如下：

由于其它地方也需要實現(xiàn)這種功能，所以，需要封裝成一個組件。

代碼如下：

1. 父頁面代碼

1.1 變量：open：表示現(xiàn)在的狀態(tài)，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">常規(guī)工藝</span>
? </div>
? <div class="card_con">
? ? <a-row>
? ? ? <a-col :span="12">產品類型：常規(guī)</a-col>
? ? ? <a-col :span="12">板子大?。撼Ｒ?guī)</a-col>
? ? ? <a-col :span="12">出貨方式：常規(guī)</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,
? ?},
}

2. 組件代碼

<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,
? ? }"
? ? :style="{ height: !isOpen && !card ? height + 'px' : 'auto' }"
? >
? ? <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>

完成?。?/p>

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

展開效果：