Collapse 折叠面板

基本用法

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

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

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

Collapse Prop

CollapseItem Prop

Events