Vant3 Collapse 折疊面板

介紹

將一組內(nèi)容放置在多個折疊面板中，點擊面板的標(biāo)題可以展開或收縮其內(nèi)容。

實例演示

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

import { createApp } from 'vue';
import { Collapse, CollapseItem } from 'vant';

const app = createApp();
app.use(Collapse);
app.use(CollapseItem);

代碼演示

基礎(chǔ)用法

通過 v-model 控制展開的面板列表，activeNames 為數(shù)組格式。

<van-collapse v-model="activeNames">
  <van-collapse-item title="標(biāo)題1" name="1">內(nèi)容</van-collapse-item>
  <van-collapse-item title="標(biāo)題2" name="2">內(nèi)容</van-collapse-item>
  <van-collapse-item title="標(biāo)題3" name="3">內(nèi)容</van-collapse-item>
</van-collapse>

import { ref } from 'vue';

export default {
  setup() {
    const activeNames = ref(['1']);
    return { activeNames };
  },
};

手風(fēng)琴

通過 accordion 可以設(shè)置為手風(fēng)琴模式，最多展開一個面板，此時 activeName 為字符串格式。

<van-collapse v-model="activeName" accordion>
  <van-collapse-item title="標(biāo)題1" name="1">內(nèi)容</van-collapse-item>
  <van-collapse-item title="標(biāo)題2" name="2">內(nèi)容</van-collapse-item>
  <van-collapse-item title="標(biāo)題3" name="3">內(nèi)容</van-collapse-item>
</van-collapse>

import { ref } from 'vue';

export default {
  setup() {
    const activeName = ref('1');
    return { activeName };
  },
};

禁用狀態(tài)

通過 disabled 屬性來禁用單個面板。

<van-collapse v-model="activeNames">
  <van-collapse-item title="標(biāo)題1" name="1">內(nèi)容</van-collapse-item>
  <van-collapse-item title="標(biāo)題2" name="2" disabled>內(nèi)容</van-collapse-item>
  <van-collapse-item title="標(biāo)題3" name="3" disabled>內(nèi)容</van-collapse-item>
</van-collapse>

自定義標(biāo)題內(nèi)容

通過 title 插槽可以自定義標(biāo)題欄的內(nèi)容。

<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
    <template #title>
      <div>標(biāo)題1 <van-icon name="question-o" /></div>
    </template>
    內(nèi)容
  </van-collapse-item>
  <van-collapse-item title="標(biāo)題2" name="2" icon="shop-o">
    內(nèi)容
  </van-collapse-item>
</van-collapse>

import { ref } from 'vue';

export default {
  setup() {
    const activeNames = ref(['1']);
    return { activeNames };
  },
};

API

Collapse Props

Collapse Events

CollapseItem Props

CollapseItem 方法

通過 ref 可以獲取到 CollapseItem 實例并調(diào)用實例方法，詳見組件實例方法。

類型定義

通過 CollapseItemInstance 獲取 CollapseItem 實例的類型定義。

import { ref } from 'vue';
import type { CollapseItemInstance } from 'vant';

const collapseItemRef = ref<CollapseItemInstance>();

collapseItemRef.value?.toggle();

CollapseItem Slots

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。