import{c as t,o as e,A as d}from"./vendor.80bf15c7.js";const o={class:"markdown-body"},n=d('

Collapse 折叠面板

基本用法

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

<nut-collapse v-model="activeNames">\n    <nut-collapse-item title="标题1" :name="1">\n        京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府 \n    </nut-collapse-item>\n    <nut-collapse-item title="标题2" :name="2">\n        京东到家：教师节期间 创意花束销量增长53倍 \n    </nut-collapse-item>\n    <nut-collapse-item title="标题3" :name="3" disabled>\n    </nut-collapse-item>\n</nut-collapse>\n
setup() {\n  const activeNames = reactive([1, 2]);\n  return {\n    activeNames\n  };\n}\n

手风琴

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

<nut-collapse v-model="activeName" :accordion="true">\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  return {\n    activeName,\n    subTitle: '副标题'\n  };\n}\n

图标展示

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

<nut-collapse v-model="activeName" :accordion="true" :expand-icon-position="expandIconPosition" :icon="icon" :rotate="rotate" :icon-width="iconWidth"\n        :icon-height="iconHeight">\n    <nut-collapse-item :title="title1" :name="1">\n        京东数科IPO将引入“绿鞋机制” \n    </nut-collapse-item>\n    <nut-collapse-item :title="title2" :name="2">\n        世界制造业大会开幕，阿里巴巴与安徽合作再升级\n    </nut-collapse-item>\n</nut-collapse>\n
setup() {\n  return {\n    activeName: 1,\n    expandIconPosition: 'left',\n    icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/132849/8/9709/550/5f5f0d8aE802abee7/68bd02b3a52c3988.png'\n    rotate: 180,\n    iconWidth: '20px',\n    iconHeight: '20px',\n  };\n}\n

Collapse Prop

字段说明类型默认值
v-model当前展开面板的 name手风琴模式：string | number
非手风琴模式：(string | number)[]		-
accordion是否开启手风琴模式booleanfalse
border是否显示外边框booleantrue

Events

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

CollapseItem Props

参数说明类型默认值
title标题栏左侧内容string-
name唯一标识符，必填string \\ number-1
expand-icon-position标题图标的位置stringright
title-icon标题图标链接string‘’ 为不展示图标，默认 ‘’
title-icon-width标题图标宽度string13px
title-icon-height标题图标高度string13px
title-icon-position标题图标位置string‘left’ ‘right’
sub-title标题栏副标题string-
icon标题栏自定义图标链接string‘none’ 为不展示图标，默认 ‘’
icon-width标题栏自定义图标宽度string24px
icon-height标题栏自定义图标高度string12px
rotate点击折叠和展开的旋转角度,在自定义图标模式下生效string \\ number180
',19),l={expose:[],setup:d=>(d,l)=>(e(),t("div",o,[n]))};export default l;