Vant Collapse 折疊面板

引入

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" disabled>內(nèi)容</van-collapse-item>
</van-collapse>

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

手風(fēng)琴

通過accordion可以設(shè)置為手風(fēng)琴模式，最多展開一個(gè)面板，此時(shí)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'
    };
  }
};

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

<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
    <div slot="title">標(biāo)題1 <van-icon name="question-o" /></div>
    內(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']
    };
  }
};

API

Collapse Props

Collapse Events

CollapseItem Props

CollapseItem Slots