<markdown>
# 触发展开的区域

当你需要自定义展开区域时，可以使用 `trigger-areas` 属性来指定触发展开的区域。
</markdown>

<script lang="ts" setup>
import { computed, ref } from 'vue'

const mainRef = ref(true)
const extraRef = ref(true)
const arrowRef = ref(true)
const triggerAreasRef = computed(() => {
  const areas: Array<'main' | 'extra' | 'arrow'> = []
  if (mainRef.value)
    areas.push('main')
  if (extraRef.value)
    areas.push('extra')
  if (arrowRef.value)
    areas.push('arrow')
  return areas
})

// 导出为模板可用的变量
const main = mainRef
const extra = extraRef
const arrow = arrowRef
const triggerAreas = triggerAreasRef
</script>

<template>
  <n-flex vertical>
    <n-flex>
      <n-tag v-model:checked="main" checkable>
        main
      </n-tag>
      <n-tag v-model:checked="extra" checkable>
        extra
      </n-tag>
      <n-tag v-model:checked="arrow" checkable>
        arrow
      </n-tag>
    </n-flex>
    <n-collapse :trigger-areas="triggerAreas">
      <n-collapse-item title="青铜" name="1">
        <template #header-extra>
          Extra
        </template>
        <div>可以</div>
      </n-collapse-item>
      <n-collapse-item title="白银" name="2">
        <template #header-extra>
          Extra
        </template>
        <div>很好</div>
      </n-collapse-item>
      <n-collapse-item title="黄金" name="3">
        <template #header-extra>
          Extra
        </template>
        <div>真棒</div>
      </n-collapse-item>
    </n-collapse>
  </n-flex>
</template>
