<template>
  <transition v-bind="listeners">
    <!-- 當(dāng)visible的值發(fā)生改變時(shí)，過(guò)渡組件的監(jiān)聽(tīng)器就會(huì)觸發(fā) -->
    <div v-show="visible" class="x-collapse-transition">
      <slot />
    </div>
  </transition>
</template>
<script setup>
defineProps({ visible: Boolean })
const listeners = {
  // 元素由隱藏變?yōu)榭梢?jiàn)
  onEnter (/** @type {HTMLElement} */ el) {
    el.style.height = 'auto' // 將高度設(shè)為auto，是為了獲取該元素的計(jì)算高度
    const endHeight = window.getComputedStyle(el).height // 計(jì)算高度
    el.style.height = '0px' // 將高度再設(shè)置為0
    el.offsetHeight // 強(qiáng)制重繪，重繪后再改變高度才會(huì)產(chǎn)生動(dòng)畫(huà)
    el.style.height = endHeight // 設(shè)置為計(jì)算高度
  },
  onAfterEnter (/** @type {HTMLElement} */ el) {
    el.style.height = null // 過(guò)渡進(jìn)入之后，將高度恢復(fù)為null
  },
  // 元素由可見(jiàn)變?yōu)殡[藏
  onLeave (/** @type {HTMLElement} */ el) {
    el.style.height = window.getComputedStyle(el).height // 計(jì)算高度
    el.offsetHeight // 強(qiáng)制重繪，重繪后再改變高度才會(huì)產(chǎn)生動(dòng)畫(huà)
    el.style.height = '0px' // 將高度設(shè)置為0
  },
  onAfterLeave (/** @type {HTMLElement} */ el) {
    el.style.height = null // 過(guò)渡離開(kāi)之后，將高度恢復(fù)為null
  }
}
</script>
<style lang="scss">
  .x-collapse-transition {
    overflow: hidden;
    transition: height .22s ease-in-out;
  }
</style>

<template>
  <div :class="[cls, { 'is-active': isActive }]">
    <div :class="`${cls}_header`" @click="onToggle">
      <div :class="`${cls}_title`">
        <slot name="title">{{ title }}</slot>
      </div>
      <i :class="['x-icon-arrow-right', `${cls}_arrow`, { 'is-active': isActive }]"></i>
    </div>
    <x-collapse-transition :visible="isActive">
      <div :class="`${cls}_content`">
        <slot />
      </div>
    </x-collapse-transition>
  </div>
</template>
<script setup>
import { computed, inject } from 'vue'
import { COLLAPSE_INJECT_KEY } from '../../constants' // 當(dāng)它是個(gè)字符串常量就行
import { N, S, B } from '../../types' // N: Number, S: String, B: Boolean
import { genKey } from '../../utils' // 生成唯一性的數(shù)值key，之前的文章中有源碼
import XCollapseTransition from './CollapseTransition.vue' // 折疊動(dòng)畫(huà)組件
const props = defineProps({
  name: [S, N],
  title: S,
  disabled: B
})
const collapse = inject(COLLAPSE_INJECT_KEY, '') // 注入折疊面板組件提供的一些屬性和方法
const cls = 'x-collapse-item'
const idKey = computed(() => props.name || genKey()) // 如果沒(méi)提供name，我們生成一個(gè)key
const isActive = computed(() => collapse.includes(idKey.value)) // 是否展開(kāi)狀態(tài)
function onToggle () { // 內(nèi)容可見(jiàn)時(shí)隱藏，隱藏時(shí)可見(jiàn)
  collapse.updateModel(idKey.value)
}
</script>

@import './common/var.scss';
.x-collapse-item {
  font-size: 13px;
  background-color: #fff;
  color: $--color-text-primary;
  border-bottom: 1px solid $--border-color-lighter;
  &:first-child {
    border-top: 1px solid $--border-color-lighter;
  }
  &_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    cursor: pointer;
  }
  &_content {
    line-height: 1.8;
    padding-bottom: 25px;
  }
  &_arrow {
    margin-right: 8px;
    transition: transform .2s;
    &.is-active {
      transform: rotate(90deg);
    }
  }
}

<template>
  <div class="x-collapse">
    <slot />
  </div>
</template>
<script setup>
import { provide, reactive, ref, watch } from 'vue'
import { COLLAPSE_INJECT_KEY } from '../../constants' // 一個(gè)字符串常量
import { S, B, A } from '../../types' // 參看CollapseItem組件
const props = defineProps({
  modelValue: [S, A], // Vue3使用modelValue取代了Vue2中的value
  accordion: B // 是否手風(fēng)琴模式，手風(fēng)琴模式只能有1個(gè)面板項(xiàng)是展開(kāi)狀態(tài)
})
const emit = defineEmits(['update:modelValue', 'change'])
function emitValue (v) {
  emit('update:modelValue', v) // 與props.modelValue結(jié)合實(shí)現(xiàn)雙向數(shù)據(jù)綁定
  emit('change', v)
}
const model = ref(props.modelValue)
watch(() => props.modelValue, v => model.value = v)
provide(COLLAPSE_INJECT_KEY, { // 提供2個(gè)方法用于注入子組件，給子組件調(diào)用
  includes (v) { // 根據(jù)面板的key，判斷是否包含該面板項(xiàng)
    return props.accordion ? model.value === v : (model.value || []).includes(v)
  },
  updateModel (v) { // 更新面板項(xiàng)的內(nèi)容折疊和展開(kāi)狀態(tài)
    const { value } = model
    if (props.accordion) {
      model.value = value === v ? null : v
      emitValue(model.value)
    } else {
      if (!value) model.value = []
      const index = model.value.indexOf(v)
      index > -1 ? model.value.splice(index, 1) : model.value.push(v)
      emitValue(model.value)
    }
  }
})
</script>