引入

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

Vue.use(Collapse);
Vue.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>

export default {
  data() {
    return {
      activeNames: ['1'],
    };
  },
};

手風(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>

export default {
  data() {
    return {
      activeName: '1',
    };
  },
};

禁用狀態(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>

export default {
  data() {
    return {
      activeNames: ['1'],
    };
  },
};

Collapse Props

Collapse Events

CollapseItem Props

CollapseItem Slots

CollapseItem 方法

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

樣式變量

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