76 lines
1.3 KiB
Vue
76 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="collapse-title" @click="onChange" >
|
|
<div class="title-text">{{title}}</div>
|
|
<el-link type="primary" :underline="false">
|
|
<template v-if="show">
|
|
<i class="el-icon-arrow-up"/>
|
|
</template>
|
|
<template v-else>
|
|
<i class="el-icon-arrow-down"/>
|
|
</template>
|
|
</el-link>
|
|
</div>
|
|
<div class="collapse-content">
|
|
<el-collapse-transition>
|
|
<div v-show="show">
|
|
<slot></slot>
|
|
</div>
|
|
</el-collapse-transition>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "CollapsePanel",
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
value: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: this.value
|
|
}
|
|
},
|
|
watch: {
|
|
value(val) {
|
|
this.show = val;
|
|
}
|
|
},
|
|
methods: {
|
|
onChange() {
|
|
this.show = !this.show;
|
|
this.$emit('input', this.show);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.collapse-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
background-color: #f4faff;
|
|
padding: 8px 14px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: .25s;
|
|
&:hover {
|
|
background-color: #e5f2ff;
|
|
}
|
|
.title-text {
|
|
font-size: 14px;
|
|
color: #1890ff;
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|