TUI

<template>
  <TsButton @click="isExpandBasic = !isExpandBasic">{{ isExpandBasic ? '收起' : '展开' }}</TsButton>
  <TsCollapse v-model="isExpandBasic">
    <div style="padding: 16px; background: #f5f5f5;">
      这是基础折叠面板内容，支持任意自定义内容。
    </div>
  </TsCollapse>
</template>

<script setup>
  import { ref } from 'vue';
  const isExpandBasic = ref(true);
</script>

<template>
  <TsButton @click="isExpandCustomHeight = !isExpandCustomHeight">{{ isExpandCustomHeight ? '收起' : '展开' }}</TsButton>
  <TsCollapse v-model="isExpandCustomHeight" :collapsedHeight="40" :transitionDuration="300">
    <div style="padding: 16px; background: #e0f7fa;">
      这里是带有自定义折叠高度的内容。
    </div>
  </TsCollapse>
</template>

<script setup>
  import { ref } from 'vue';
  const isExpandCustomHeight = ref(false);
</script>

<template>
  <TsButton @click="isExpandDynamic = !isExpandDynamic">{{ isExpandDynamic ? '收起' : '展开' }}</TsButton>
  <TsButton @click="addItem" style="margin-left:8px;">添加内容</TsButton>
  <TsCollapse ref="dynamicCollapseRef" v-model="isExpandDynamic" :collapsedHeight="0" :transitionDuration="300">
    <div style="padding: 16px; background: #f3e5f5;">
      <ul>
        <li v-for="(item, idx) in dynamicList" :key="idx">{{ item }}</li>
      </ul>
    </div>
  </TsCollapse>
</template>

<script setup>
  import { ref } from 'vue';
  const isExpandDynamic = ref(false);
  const dynamicList = ref(['列表项 1', '列表项 2', '列表项 3']);

  function addItem() {
    dynamicList.value.push(`列表项 ${dynamicList.value.length + 1}`);
    // 需要手动调用更新高度
    dynamicCollapseRef.value?.expandAndUpdateHeight();
  }
</script>

<template>
  <TsButton @click="isExpandSlot = !isExpandSlot">{{ isExpandSlot ? '收起' : '展开' }}</TsButton>
  <TsCollapse v-model="isExpandSlot" :collapsedHeight="20" :transitionDuration="500">
    <div style="padding: 16px; background: #fff3e0;">
      <h3>标题</h3>
      <p>这里是通过插槽传入的复杂内容，支持多元素嵌套。</p>
      <TsButton @click="alert('按钮内部点击事件')">内部按钮</TsButton>
    </div>
  </TsCollapse>
</template>

<script setup>
  import { ref } from 'vue';
  const isExpandSlot = ref(false);
</script>