折叠面板 Collapse

对应 Arco Collapse：默认箭头在右，expand-icon-position="left" 对应 Arco 默认。 属性用法见 Element Plus 文档。

基础折叠

点击标题展开或收起，默认箭头在右侧。

Design

Shared tokens keep the interface consistent.

Engineering

Components make interfaces easier to maintain.

Unavailable

Unavailable content.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(['design'])
</script>

<template>
  <el-collapse v-model="value" style="width: 100%">
    <el-collapse-item title="Design" name="design">Shared tokens keep the interface consistent.</el-collapse-item>
    <el-collapse-item title="Engineering" name="engineering">Components make interfaces easier to maintain.</el-collapse-item>
    <el-collapse-item title="Unavailable" name="disabled" disabled>Unavailable content.</el-collapse-item>
  </el-collapse>
</template>

左侧箭头与手风琴

左侧箭头对应 Arco 默认；accordion 每次只展开一项。

Overview

Project overview.

Details

Project details.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('overview')
</script>

<template>
  <el-collapse v-model="value" expand-icon-position="left" accordion style="width: 100%">
    <el-collapse-item title="Overview" name="overview">Project overview.</el-collapse-item>
    <el-collapse-item title="Details" name="details">Project details.</el-collapse-item>
  </el-collapse>
</template>

与 Arco 的差异

• 箭头使用 Element Plus 线形图标，键盘聚焦标题时保留主色提示。