代码
<template>
<div class="collapse-info">
<div class="collapse-title">
<div class="title-left">
{{ title }}
</div>
<div @click="changeHide">
<Button size="small" v-if="showHideBtn">{{isHide?showTitle:hideTitle}}</Button>
<slot name="extra"></slot>
</div>
</div>
<transition name="fade">
<div class="collapse-content"
v-if="!isHide">
<slot></slot>
</div>
</transition>
</div>
</template>
<script>
export default {
props: {
//左侧标题名称
title: String,
//是否显示按钮
showHideBtn: {
type: Boolean,
default: true
},
//展示时的标题
showTitle: {
type: String,
default: '展开'
},
//折叠时的标题
hideTitle: {
type: String,
default: '折叠'
}
},
data() {
return {
isHide: false
}
},
methods: {
changeHide() {
this.isHide = !this.isHide
}
}
}
</script>
<style lang="less" scoped>
//隐藏显示动画
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.collapse-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
border-bottom: 1px solid #e8eaec;
.title-left {
color: #333333;
}
}
.collapse-info {
border: 1px solid #e8eaec;
border-bottom: none;
}
.collapse-content {
padding: 10px 20px;
border-bottom: 1px solid #e8eaec;
}
</style>
引用方法
<template>
<div>
<collapseInfo title="基本消息">
<div>测试组件</div>
</collapseInfo>
</div>
</template>
<script>
import collapseInfo from './collapse';
export default {
components: {
collapseInfo,
},
}
</script>
效果展示