Vant4 Collapse 折疊面板

介紹

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

引入

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

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

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

代碼演示

基礎用法

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

<van-collapse v-model="activeNames">
  <van-collapse-item title="標題1" name="1">
    代碼是寫出來給人看的，附帶能在機器上運行。
  </van-collapse-item>
  <van-collapse-item title="標題2" name="2">
    技術無非就是那些開發(fā)它的人的共同靈魂。
  </van-collapse-item>
  <van-collapse-item title="標題3" name="3">
    在代碼閱讀過程中人們說臟話的頻率是衡量代碼質量的唯一標準。
  </van-collapse-item>
</van-collapse>

import { ref } from 'vue';

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

手風琴

通過 ?accordion? 可以設置為手風琴模式，最多展開一個面板，此時 ?activeName? 為字符串格式。

<van-collapse v-model="activeName" accordion>
  <van-collapse-item title="標題1" name="1">
    代碼是寫出來給人看的，附帶能在機器上運行。
  </van-collapse-item>
  <van-collapse-item title="標題2" name="2">
    技術無非就是那些開發(fā)它的人的共同靈魂。
  </van-collapse-item>
  <van-collapse-item title="標題3" name="3">
    在代碼閱讀過程中人們說臟話的頻率是衡量代碼質量的唯一標準。
  </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="標題1" name="1">
    代碼是寫出來給人看的，附帶能在機器上運行。
  </van-collapse-item>
  <van-collapse-item title="標題2" name="2" disabled>
    技術無非就是那些開發(fā)它的人的共同靈魂。
  </van-collapse-item>
  <van-collapse-item title="標題3" name="3" disabled>
    在代碼閱讀過程中人們說臟話的頻率是衡量代碼質量的唯一標準。
  </van-collapse-item>
</van-collapse>

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

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

<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
    <template #title>
      <div>標題1 <van-icon name="question-o" /></div>
    </template>
    代碼是寫出來給人看的，附帶能在機器上運行。
  </van-collapse-item>
  <van-collapse-item title="標題2" name="2" icon="shop-o">
    技術無非就是那些開發(fā)它的人的共同靈魂。
  </van-collapse-item>
</van-collapse>

import { ref } from 'vue';

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

全部展開與全部切換

通過 ?Collapse? 實例上的 ?toggleAll? 方法可以實現(xiàn)全部展開與全部切換。

<van-collapse v-model="activeNames">
  <van-collapse-item title="標題1" name="1">
    代碼是寫出來給人看的，附帶能在機器上運行。
  </van-collapse-item>
  <van-collapse-item title="標題2" name="2">
    技術無非就是那些開發(fā)它的人的共同靈魂。
  </van-collapse-item>
  <van-collapse-item title="標題3" name="3">
    在代碼閱讀過程中人們說臟話的頻率是衡量代碼質量的唯一標準。
  </van-collapse-item>
</van-collapse>

<van-button type="primary" @click="openAll">全部展開</van-button>
<van-button type="primary" @click="toggleAll">全部切換</van-button>

import { ref } from 'vue';

export default {
  setup() {
    const activeNames = ref(['1']);
    const collapse = ref(null);

    const openAll = () => {
      collapse.value.toggleAll(true);
    }
    const toggleAll = () => {
      collapse.value.toggleAll();
    },

    return {
      activeNames,
      openAll,
      toggleAll,
      collapse,
    };
  },
};

Tips: 手風琴模式下無法使用 toggleAll 方法。

API

Collapse Props

Collapse Events

CollapseItem Props

Collapse 方法

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

toggleAll 方法示例

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

const collapseRef = ref<CollapseInstance>();

// 全部切換
collapseRef.value?.toggleAll();
// 全部展開
collapseRef.value?.toggleAll(true);
// 全部收起
collapseRef.value?.toggleAll(false);

// 全部全部切換，并跳過禁用的復選框
collapseRef.value?.toggleAll({
  skipDisabled: true,
});
// 全部選中，并跳過禁用的復選框
collapseRef.value?.toggleAll({
  expanded: true,
  skipDisabled: true,
});

CollapseItem 方法

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

類型定義

組件導出以下類型定義：

import type {
  CollapseProps,
  CollapseItemProps,
  CollapseItemInstance,
  CollapseToggleAllOptions,
} from 'vant';

?CollapseItemInstance? 是組件實例的類型，用法如下：

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

const collapseItemRef = ref<CollapseItemInstance>();

collapseItemRef.value?.toggle();

CollapseItem Slots

主題定制

樣式變量

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