Collapse 折疊面板

可展開 / 收起的內容區域，支援手風琴模式（同時只展開一個）與 v-model 受控。

折疊面板

<template>
  <div class="demo-col" style="max-width: 420px">
    <p class="demo-note">可同時展開多個</p>
    <LhCollapse v-model="actives">
      <LhCollapseItem name="song" title="宋代">
        <p class="demo-note">范寬《溪山行旅圖》、郭熙《早春圖》。</p>
      </LhCollapseItem>
      <LhCollapseItem name="yuan" title="元代">
        <p class="demo-note">黃公望《富春山居圖》。</p>
      </LhCollapseItem>
      <LhCollapseItem name="ming" title="明代" disabled>
        <p class="demo-note">停用面板。</p>
      </LhCollapseItem>
    </LhCollapse>
    <p class="demo-note">手風琴模式（同時只展開一個）</p>
    <LhCollapse v-model="active" accordion>
      <LhCollapseItem name="gongbi" title="工筆">
        <p class="demo-note">精細勾勒，層層渲染。</p>
      </LhCollapseItem>
      <LhCollapseItem name="xieyi" title="寫意">
        <p class="demo-note">筆墨放縱，不求形似。</p>
      </LhCollapseItem>
    </LhCollapse>
    <p class="demo-note">當前展開：{{ Array.isArray(actives) ? actives.join('、') : actives }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({ actives: ['song'], active: 'gongbi' }),
}
</script>

Collapse Props

屬性	說明	類型	預設值
v-model	當前啟用的面板（受控 modelValue prop）	string \| number \| (string \| number)[]	—
accordion	手風琴模式：同時只展開一個	boolean	false
sx	sx 快速佈局屬性	—	—

CollapseItem Props

屬性	說明	類型	預設值
name	面板唯一標識（必填）	string \| number	—
title	標題（也可用 title 插槽）	string	''
disabled	停用展開	boolean	false
sx	sx 快速佈局屬性	—	—

Events

事件	說明	回呼參數
change	當前啟用面板變化時觸發	當前啟用值，手風琴為單值，否則為陣列