12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <script setup lang="ts">
- import { ref, onMounted } from 'vue';
- const active=ref(false);
- const props=defineProps({
- selected: Boolean,
- name: String
- });
- const emit = defineEmits(['collapse-open']);
- onMounted(() => {
- active.value = props.selected
- if (active.value) {
- emit('collapse-open')
- }
- });
- function toggle () {
- active.value=!active.value;
- if (active.value) {
- emit('collapse-open')
- }
- }
- </script>
- <template>
- <div class="card" >
- <div class="card-body">
- <div class="d-flex justify-content-between align-items-center" @click.prevent="toggle">
- <h5 class="card-title">{{ props.name }}</h5>
- <div class="collapse-header" :class="{ 'is-active': active }"></div>
- </div>
- <Transition name="fade">
- <div class="collapse-content" v-show="active">
- <div class="collapse-content-box">
- <slot></slot>
- </div>
- </div>
- </Transition>
- </div>
- </div>
- </template>
- <style scoped>
- .card-title {
- display: flex;
- }
- .collapse-header {
- display: flex;
- content: url('../assets/arrow-down.svg');
- transform: rotate(-90deg);
- }
- .is-active {
- transform: rotate(0deg);
- }
- .fade-enter-active,
- .fade-leave-active {
- transition: opacity 0.2s ease;
- }
- .fade-enter-from,
- .fade-leave-to {
- opacity: 0
- }
- </style>
|