TnCollapse-折叠面板

该组件用于折叠内容，只显示标题，点击标题展开内容

组件位置

nodeuni_modules

typescript

import TnCollapse from '@tuniao/tnui-vue3-uniapp/components/collapse/src/collapse.vue'
import TnCollapseItem from '@tuniao/tnui-vue3-uniapp/components/collapse/src/collapse-item.vue'

import TnCollapse from '@tuniao/tnui-vue3-uniapp/components/collapse/src/collapse.vue'
import TnCollapseItem from '@tuniao/tnui-vue3-uniapp/components/collapse/src/collapse-item.vue'

typescript

import TnCollapse from '@/uni_modules/tuniaoui-vue3/components/collapse/src/collapse.vue'
import TnCollapseItem from '@/uni_modules/tuniaoui-vue3/components/collapse/src/collapse-item.vue'

import TnCollapse from '@/uni_modules/tuniaoui-vue3/components/collapse/src/collapse.vue'
import TnCollapseItem from '@/uni_modules/tuniaoui-vue3/components/collapse/src/collapse-item.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

通过v-model绑定TnCollapseItem的索引值，控制内容的展开与收起，如果accordion为false传递必须为一个数组

vue

<script lang="ts" setup>
import { ref } from 'vue'

const currentCollapse = ref<number>()

const collapseData = [
  {
    title: '关雎',
    content:
      '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。',
  },
  {
    title: '长歌行',
    content:
      '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！',
  },
  {
    title: '秋风辞',
    content:
      '秋风起兮白云飞，草木黄落兮雁南归。兰有秀兮菊有芳，怀佳人兮不能忘。泛楼船兮济汾河，横中流兮扬素波。少壮几时兮奈老何！',
  },
]
</script>

<template>
  <TnCollapse v-model="currentCollapse">
    <TnCollapseItem
      v-for="(item, index) in collapseData"
      :key="index"
      :title="item.title"
    >
      {{ item.content }}
    </TnCollapseItem>
  </TnCollapse>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const currentCollapse = ref<number>()

const collapseData = [
  {
    title: '关雎',
    content:
      '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。',
  },
  {
    title: '长歌行',
    content:
      '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！',
  },
  {
    title: '秋风辞',
    content:
      '秋风起兮白云飞，草木黄落兮雁南归。兰有秀兮菊有芳，怀佳人兮不能忘。泛楼船兮济汾河，横中流兮扬素波。少壮几时兮奈老何！',
  },
]
</script>

<template>
  <TnCollapse v-model="currentCollapse">
    <TnCollapseItem
      v-for="(item, index) in collapseData"
      :key="index"
      :title="item.title"
    >
      {{ item.content }}
    </TnCollapseItem>
  </TnCollapse>
</template>

手风琴模式

手风琴模式默认为开启状态，在开启手风琴后只允许展开一个面板

通过修改accordion属性来开启手风琴模式

在手风琴模式下v-model的值为number 类型

在非手风琴模式下v-model的值为number[] 类型

vue

<template>
  <TnCollapse v-model="currentCollapse" :accordion="false">
    <TnCollapseItem
      v-for="(item, index) in collapseData"
      :key="index"
      :title="item.title"
    >
      {{ item.content }}
    </TnCollapseItem>
  </TnCollapse>
</template>

<template>
  <TnCollapse v-model="currentCollapse" :accordion="false">
    <TnCollapseItem
      v-for="(item, index) in collapseData"
      :key="index"
      :title="item.title"
    >
      {{ item.content }}
    </TnCollapseItem>
  </TnCollapse>
</template>

禁止操作

通过给TnCollapseItem的disabled属性设置为true来禁止操作

禁止第二个折叠面板操作

vue

<template>
  <TnCollapse v-model="currentCollapse">
    <TnCollapseItem
      v-for="(item, index) in collapseData"
      :key="index"
      :title="item.title"
      :disabled="index === 1"
    >
      {{ item.content }}
    </TnCollapseItem>
  </TnCollapse>
</template>

<template>
  <TnCollapse v-model="currentCollapse">
    <TnCollapseItem
      v-for="(item, index) in collapseData"
      :key="index"
      :title="item.title"
      :disabled="index === 1"
    >
      {{ item.content }}
    </TnCollapseItem>
  </TnCollapse>
</template>

自定义标题

通过TnCollapseItem的title插槽来自定义标题

vue

<template>
  <TnCollapse v-model="currentCollapse">
    <TnCollapseItem
      v-for="(item, index) in collapseData"
      :key="index"
      :title="item.title"
    >
      <template #title>
        <view class="tn-gray_text">{{ item.title }}</view>
      </template>
      {{ item.content }}
    </TnCollapseItem>
  </TnCollapse>
</template>

<template>
  <TnCollapse v-model="currentCollapse">
    <TnCollapseItem
      v-for="(item, index) in collapseData"
      :key="index"
      :title="item.title"
    >
      <template #title>
        <view class="tn-gray_text">{{ item.title }}</view>
      </template>
      {{ item.content }}
    </TnCollapseItem>
  </TnCollapse>
</template>

API

Collapse Props

属性名	说明	类型	默认值	可选值
model-value/v-model	绑定对应展开的折叠内容的唯一标识	Number ｜ Array<number>	-	-
accordion	是否开启手风琴效果，每次只能打开一个面板	Boolean	`true`	`false`
show-arrow	是否显示折叠面板的箭头	Boolean	`true`	`false`
arrow-color	折叠面板箭头的颜色，`show-arrow`为`true`时生效，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-

Collapse Events

事件名	说明	类型
change	折叠状态发生改变时触发	`(value: (string \| number)[] \| string \| number) => void`

Collapse Slots

插槽名	说明	子标签
default	自定义内容	`TnCollapseItem`

CollapseItem Props

属性名	说明	类型	默认值	可选值
title	CollapseItem 标题	String	-	-
disabled	禁止 CollapseItem 进行折叠展开操作	Boolean	`false`	`true`

CollapseItem Slots

插槽名	说明
default	折叠显示的内容
title	自定义折叠面板的标题

TnCollapse-折叠面板 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

手风琴模式 ​

禁止操作 ​

禁止第二个折叠面板操作 ​

自定义标题 ​

API ​

Collapse Props ​

Collapse Events ​

Collapse Slots ​

CollapseItem Props ​

CollapseItem Slots ​