Collapse 折叠面板

介绍

将内容放置在多个折叠面板中，点击面板标题可展开或收缩内容。

安装

import { createApp } from 'vue';
// vue
import { Collapse,CollapseItem } from '@nutui/nutui';
// taro
import { Collapse,CollapseItem } from '@nutui/nutui-taro';

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

代码演示

基本用法

通过v-model控制展开的面板列表，activeNames为数组格式

<nut-collapse v-model:active="active1" icon="down-arrow">
  <nut-collapse-item :name="1">
    <template v-slot:mTitle>
      {{title1}}
    </template>
    NutUI是一套拥有京东风格的轻量级的 Vue 组件库
  </nut-collapse-item>
  <nut-collapse-item :title="title2" :name="2">
    在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
  </nut-collapse-item>
  <nut-collapse-item :title="title3" :name="3" disabled>
  </nut-collapse-item>
</nut-collapse>

setup() {
  const activeNames = reactive([1, 2]);
  const title = reactive({
    title1: '标题1',
    title2: '标题2',
    title3: '标题3',
  })
  return {
    activeNames,
    ...toRefs(title)
  };
}

无icon样式

<nut-collapse v-model:active="activeName" :accordion="true">
  <nut-collapse-item :title="title1" :name="1">
   引入Vue3新特性 Composition API、Teleport、Emits 等
  </nut-collapse-item>
  <nut-collapse-item :title="title2" :name="2">
    全面使用 TypeScipt
  </nut-collapse-item>
</nut-collapse>

setup() {
  const activeName = ref(1);
  const title = reactive({
    title1: '标题1',
    title2: '标题2',
    title3: '标题3',
  })
  return {
    activeName,
    ...toRefs(title)
  };
}

手风琴

通过accordion可以设置为手风琴模式，最多展开一个面板，此时activeName为字符串格式；subTitle可以设置副标题的内容

 <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
  <nut-collapse-item :title="title1" :name="1">
    基于京东设计语言体系，构建场景
  </nut-collapse-item>
  <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
   提高界⾯的模块化通用程度
  </nut-collapse-item>
  <nut-collapse-item :title="title3" :name="3">
  采用组合式 API Composition 语法重构，结构清晰，功能模块化
  </nut-collapse-item>
</nut-collapse>

setup() {
  const activeName = ref(1);
  const subTitle = '副标题';
  const title = reactive({
    title1: '标题1',
    title2: '标题2',
    title3: '标题3',
  })
  return {
    activeName,
    subTitle,
    ...toRefs(title)
  };
}

自定义折叠图标

通过icon设置自定义图标，rotate设置图标旋转的角度

<nut-collapse
  v-model:active="activeName"
  :accordion="true"
  icon="arrow-right2"
  rotate="90"
>
  <nut-collapse-item :title="title1" :name="1">
    <template v-slot:sTitle>
      文本测试
    </template>
    NUTUI3.0重新思考其内在的一致性和可组合性
  </nut-collapse-item>
  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
    提⾼产研输出对接的效率，降低输出工作量
  </nut-collapse-item>
</nut-collapse>

const activeName = ref(1);
const title = reactive({
  title1: '标题1',
  title2: '标题2',
})
return {
  activeName,
  ...toRefs(title)
};

自定义标题图标

通过icon设置自定义图标，rotate设置图标旋转的角度

<nut-collapse
  v-model:active="activeName"
  title-icon="issue"
  title-icon-color="red"
  title-icon-size="20px"
  title-icon-position="left"
  icon="down-arrow"
  :accordion="true"
>
  <nut-collapse-item :title="title1" :name="1">
  组件 emits 事件单独提取，增强代码可读性
  </nut-collapse-item>
  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
  使用 Teleport 新特性重构挂载类组件
  </nut-collapse-item>
</nut-collapse>

const activeName = ref(1);
const title = reactive({
  title1: '标题1',
  title2: '标题2',
})
return {
  activeName,
  ...toRefs(title)
};

Collapse Prop

字段	说明	类型	默认值
v-model	当前展开面板的 name	手风琴模式：string \| number 非手风琴模式：(string \| number)[]	-
accordion	是否开启手风琴模式	boolean	false
icon	图标链接/或使用 NutUI 的 icon	string	‘’
icon-size	图标大小	string	16px
icon-color	图标颜色	string	''
title-icon	标题图标链接/或使用 NutUI 的 icon	string	‘’
title-icon-size	标题图标大小	string	16px
title-icon-color	标题图标颜色	string	’‘
title-icon-position	标题图标位置	string	‘left'
rotate	点击折叠和展开的旋转角度,在自定义图标模式下生效	string \ number	180

CollapseItem Prop

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|------| | name | 唯一标识符，必填 | string \ number | -1 | | title | 标题栏左侧内容，支持插槽传入（props传入的优先级更高） | string | - | | sub-title | 标题栏副标题，支持插槽传入（props传入的优先级更高） | string | - | | disabled | 标题栏是否禁用 | boolean | false |

Events

事件名	说明	回调参数
change	切换面板时触发	类型与 v-model 绑定的值一致

doc.md 5.5 KB 履歴 Raw