import{c as t,o as e,D as o}from"./index.d870aa4d.js";const n={class:"markdown-body"},l=o('

Collapse 折叠面板

基本用法

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

<nut-collapse v-model:active="active1" icon="down-arrow">\n  <nut-collapse-item :title="title1" :name="1">\n    京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府\n  </nut-collapse-item>\n  <nut-collapse-item :title="title2" :name="2">\n    京东到家：教师节期间 创意花束销量增长53倍\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    2020年中国数字游戏市场规模超2786亿元\n  </nut-collapse-item>\n  <nut-collapse-item :title="title2" :name="2">\n    基于区块链技术的取证APP在浙江省杭州市发布\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    华为终端操作系统EMUI 11发布，9月11日正式开启\n  </nut-collapse-item>\n  <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">\n    中国服务机器人市场已占全球市场超1/4\n  </nut-collapse-item>\n  <nut-collapse-item :title="title3" :name="3">\n    QuestMobile：90后互联网用户规模超越80后达3.62亿\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    京东数科IPO将引入“绿鞋机制”\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    “森亿智能”获4亿元D轮融资\n  </nut-collapse-item>\n  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">\n    快看漫画与全球潮玩集合店X11达成战略合作\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 绑定的值一致
',26),d={expose:[],setup:o=>(o,d)=>(e(),t("div",n,[l]))};export default d;