ERP 组件库

Appearance

折叠面板 Collapse ​

可以折叠 / 展开的内容区域。 ​

基本用法 ​

用于将复杂的内容区域分组和隐藏，可折叠或展开。默认可以展开多个面板。

代码事例
vue
<template>
  <fk-collapse :default-active-key="['1', 2]">
    <fk-collapse-item key="1" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item :key="2" header="Aaaa Technology Co., Ltd." disabled>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item key="3" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
  </fk-collapse>
</template>

手风琴模式 ​

通过 accordion 开启手风琴模式，同时只能打开一个面板。

代码事例
vue
<template>
  <fk-collapse :default-active-key="[1]" accordion>
    <fk-collapse-item key="1" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item key="2" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item key="3" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
  </fk-collapse>
</template>

嵌套面板 ​

面板多层嵌套。

代码事例
vue
<template>
  <fk-collapse :default-active-key="['1', 2]" destroy-on-hide>
    <fk-collapse-item key="1" header="Aaaa Technology Co., Ltd.">
      <fk-collapse :default-active-key="['1.1']" destroy-on-hide>
        <fk-collapse-item key="1.1" header="Aaaa Technology Co., Ltd.">
          <div>Aaaa Technology Co., Ltd.</div>
        </fk-collapse-item>
        <fk-collapse-item key="1.2" header="Aaaa Technology Co., Ltd.">
          <div>Aaaa Technology Co., Ltd.</div>
        </fk-collapse-item>
      </fk-collapse>
    </fk-collapse-item>
    <fk-collapse-item :key="2" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item key="3" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
  </fk-collapse>
</template>

无边框模式 ​

通过设置 bordered="false" 隐藏边框。

代码事例
vue
<template>
  <fk-collapse :default-active-key="['1']" :bordered="false">
    <fk-collapse-item key="1" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item key="2" header="Aaaa Technology Co., Ltd." disabled>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item key="3" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
  </fk-collapse>
</template>

额外节点 ​

通过 extra 可以设置额外节点。extra 单击可以以设置 stop 修饰符，以阻止当前项目展开。

代码事例
vue
<template>
  <fk-collapse>
    <fk-collapse-item key="1" header="Aaaa Technology Co., Ltd.">
      <template #extra>
        <icon-copy />
      </template>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item :key="2" header="Aaaa Technology Co., Ltd.">
      <template #extra>
        <fk-button type="primary" size="mini" @click.stop="sayHello">hello</fk-button>
      </template>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item key="3" header="Aaaa Technology Co., Ltd.">
      <template #extra>
        <fk-tag size="small">city</fk-tag>
      </template>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
  </fk-collapse>
</template>

<script>
import { Message } from '@erp/common';

export default {
  setup() {
    const sayHello = () => {
      Message.info('hello');
    };

    return {
      sayHello,
    };
  },
};
</script>

展开图标 ​

为展开项自定义展开图标

代码事例
vue
<template>
  <fk-collapse :default-active-key="['1', 2]">
    <template #expand-icon="{ active }">
      <icon-face-smile-fill v-if="active"/>
      <icon-face-frown-fill v-else/>
    </template>
    <fk-collapse-item key="1" header="Aaaa Technology Co., Ltd.">
      <template #expand-icon="{ active }">
        <icon-double-down v-if="active"/>
        <icon-double-right v-else/>
      </template>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item :key="2" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item key="3" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
  </fk-collapse>
</template>

自定义样式 ​

自定义面板样式。

代码事例
vue
<template>
  <fk-collapse :default-active-key="['1', 2]" :bordered="false">
    <fk-collapse-item key="1" header="Aaaa Technology Co., Ltd." :style="customStyle">
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item :key="2" header="Aaaa Technology Co., Ltd." :style="customStyle">
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item key="3" header="Aaaa Technology Co., Ltd." :style="customStyle">
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
  </fk-collapse>
</template>

<script>
export default {
  setup() {
    const customStyle = {
      borderRadius: '6px',
      marginBottom: '18px',
      border: 'none',
      overflow: 'hidden',
    }

    return {
      customStyle
    }
  }
}
</script>

展开图标位置 ​

通过 expand-icon-position 属性设置展开图标的位置。

代码事例
vue
<template>
  <fk-space direction="vertical" :style="{ width: '100%' }">
    <fk-space>
      <fk-radio-group v-model="position" type="button">
        <fk-radio value="left">Left</fk-radio>
        <fk-radio value="right">Right</fk-radio>
      </fk-radio-group>
      <fk-checkbox v-model="hideIcon">Hide Expand Icon</fk-checkbox>
    </fk-space>
    <fk-collapse
      :default-active-key="['1']"
      :expand-icon-position="position"
      :show-expand-icon="!hideIcon"
    >
      <fk-collapse-item key="1" header="Aaaa Technology Co., Ltd.">
        <template #expand-icon>
          <icon-plus />
        </template>
        <template #extra>
          <fk-tag size="small">city</fk-tag>
        </template>
        <div>Aaaa Technology Co., Ltd.</div>
        <div>Aaaa Technology Co., Ltd.</div>
        <div>Aaaa Technology Co., Ltd.</div>
      </fk-collapse-item>
      <fk-collapse-item
        key="2"
        header="Aaaa Technology Co., Ltd."
        disabled
      >
        <div>Aaaa Technology Co., Ltd.</div>
        <div>Aaaa Technology Co., Ltd.</div>
        <div>Aaaa Technology Co., Ltd.</div>
      </fk-collapse-item>
      <fk-collapse-item key="3" header="Aaaa Technology Co., Ltd.">
        <div>Aaaa Technology Co., Ltd.</div>
        <div>Aaaa Technology Co., Ltd.</div>
        <div>Aaaa Technology Co., Ltd.</div>
      </fk-collapse-item>
    </fk-collapse>
  </fk-space>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const position = ref('left');
    const hideIcon = ref(false);

    return {
      position,
      hideIcon,
    };
  },
};
</script>

隐藏时销毁 ​

通过设置 destroy-on-hide 可以让面板内容在隐藏时销毁。

代码事例
vue
<template>
  <fk-collapse :default-active-key="['1', 2]" destroy-on-hide>
    <fk-collapse-item key="1" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item :key="2" header="Aaaa Technology Co., Ltd.">
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
    <fk-collapse-item key="3" header="Aaaa Technology Co., Ltd." :show-expand-icon="false">
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
      <div>Aaaa Technology Co., Ltd.</div>
    </fk-collapse-item>
  </fk-collapse>
</template>

API ​

<collapse> Props ​

参数名描述类型默认值版本
active-key (v-model)当前展开的面板的 key(string | number)[]-
default-active-key默认展开的面板的 key （非受控模式）(string | number)[][]
accordion是否开启手风琴模式booleanfalse
show-expand-icon是否显示展开图标boolean-1.0.0
expand-icon-position展开图标显示的位置'left' | 'right''left'
bordered是否显示边框booleantrue
destroy-on-hide是否在隐藏时销毁内容booleanfalse1.0.0

<collapse> Events ​

事件名描述参数
change展开的面板发生改变时触发activeKey: (string | number)[]
ev: Event

<collapse-item> Props ​

参数名描述类型默认值版本
header面板的标题string-
disabled是否禁用booleanfalse
show-expand-icon是否显示展开图标booleantrue
destroy-on-hide是否在隐藏时销毁内容booleanfalse1.0.0

<collapse-item> Slots ​

插槽名描述参数版本
extra额外内容-
expand-icon展开图标active: boolean
disabled: boolean
position: 'left' | 'right'		1.0.0
header面板的标题-

FAQ ​

<CollapseItem> 组件的 key 属性为必填 ​

在 <Collapse> 组件中每个 <CollapseItem> 都需要指定唯一的 key 属性，key 对应 activeKey 中的值。

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team