import{c as t,o as e,C as o}from"./vendor.0d0a34e4.js";const n={class:"markdown-body"},l=o('

Collapse 折叠面板

介绍

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

安装

import { createApp } from 'vue';\n// vue\nimport { Collapse } from '@nutui/nutui';\n// taro\nimport { Collapse } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Collapse);\n

代码演示

基本用法

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

<nut-collapse v-model:active="active1" icon="down-arrow">\n  <nut-collapse-item :title="title1" :name="1">\n    NutUI是一套拥有京东风格的轻量级的 Vue 组件库\n  </nut-collapse-item>\n  <nut-collapse-item :title="title2" :name="2">\n    在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！\n  </nut-collapse-item>\n  <nut-collapse-item :title="title3" :name="3" disabled>\n  </nut-collapse-item>\n</nut-collapse>\n
setup() {\n  const activeNames = reactive([1, 2]);\n  const title = reactive({\n    title1: '标题1',\n    title2: '标题2',\n    title3: '标题3',\n  })\n  return {\n    activeNames,\n    ...toRefs(title)\n  };\n}\n

无icon样式

<nut-collapse v-model:active="activeName" :accordion="true">\n  <nut-collapse-item :title="title1" :name="1">\n   引入Vue3新特性 Composition API、Teleport、Emits 等\n  </nut-collapse-item>\n  <nut-collapse-item :title="title2" :name="2">\n    全面使用 TypeScipt\n  </nut-collapse-item>\n</nut-collapse>\n
setup() {\n  const activeName = ref(1);\n  const title = reactive({\n    title1: '标题1',\n    title2: '标题2',\n    title3: '标题3',\n  })\n  return {\n    activeName,\n    ...toRefs(title)\n  };\n}\n

手风琴

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

 <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">\n  <nut-collapse-item :title="title1" :name="1">\n    基于京东设计语言体系，构建场景\n  </nut-collapse-item>\n  <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">\n   提高界⾯的模块化通用程度\n  </nut-collapse-item>\n  <nut-collapse-item :title="title3" :name="3">\n  采用组合式 API Composition 语法重构，结构清晰，功能模块化\n  </nut-collapse-item>\n</nut-collapse>\n
setup() {\n  const activeName = ref(1);\n  const subTitle = '副标题';\n  const title = reactive({\n    title1: '标题1',\n    title2: '标题2',\n    title3: '标题3',\n  })\n  return {\n    activeName,\n    subTitle,\n    ...toRefs(title)\n  };\n}\n

自定义折叠图标

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

<nut-collapse\n  v-model:active="activeName"\n  :accordion="true"\n  icon="arrow-right2"\n  rotate="90"\n>\n  <nut-collapse-item :title="title1" :name="1">\n      NUTUI3.0重新思考其内在的一致性和可组合性\n  </nut-collapse-item>\n  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">\n    提⾼产研输出对接的效率，降低输出工作量\n  </nut-collapse-item>\n</nut-collapse>\n
const activeName = ref(1);\nconst title = reactive({\n  title1: '标题1',\n  title2: '标题2',\n})\nreturn {\n  activeName,\n  ...toRefs(title)\n};\n

自定义标题图标

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

<nut-collapse\n  v-model:active="activeName"\n  title-icon="issue"\n  title-icon-color="red"\n  title-icon-size="20px"\n  title-icon-position="left"\n  icon="down-arrow"\n  :accordion="true"\n>\n  <nut-collapse-item :title="title1" :name="1">\n  组件 emits 事件单独提取，增强代码可读性\n  </nut-collapse-item>\n  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">\n  使用 Teleport 新特性重构挂载类组件\n  </nut-collapse-item>\n</nut-collapse>\n
const activeName = ref(1);\nconst title = reactive({\n  title1: '标题1',\n  title2: '标题2',\n})\nreturn {\n  activeName,\n  ...toRefs(title)\n};\n

Collapse Prop

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

CollapseItem Prop

参数说明类型默认值
name唯一标识符，必填string \\ number-1
title标题栏左侧内容string-
sub-title标题栏副标题string-
disabled标题栏是否禁用booleanfalse

Events

事件名说明回调参数
change切换面板时触发类型与 v-model 绑定的值一致
',31),d={setup:o=>(o,d)=>(e(),t("div",n,[l]))};export default d;