折叠面板组件（vue）

代码

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

效果展示