uv-ui

# Collapse 折叠面板

✈

组件名：uv-collapse > uv-collapse-item

点击下载&安装 (opens new window)

通过折叠面板收纳内容区域，手风琴模式，简单配置控制面状态

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

<template>
	<uv-collapse @change="change" @close="close" @open="open">
		<uv-collapse-item title="文档指南" name="Docs guide">
			<text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>
		</uv-collapse-item>
		<uv-collapse-item title="组件全面" name="Variety components">
			<text class="uv-collapse-content">组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
		</uv-collapse-item>
		<uv-collapse-item title="众多利器" name="Numerous tools">
			<text class="uv-collapse-content">众多JS小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
		</uv-collapse-item>
	</uv-collapse>
</template>
<script>
	export default {
		methods: {
			open(e) {
				console.log('open', e)
			},
			close(e) {
				console.log('close', e)
			},
			change(e) {
				console.log('change', e)
			}
		}
	}
</script>

# 异步加载数据

组件展开的高度是内部通过js进行计算，在异步加载数据且渲染完成之后，再次调用 init 重新初始化内部高度，只有这样展开的高度才能完整显示内容。

<template>
	<uv-collapse ref="collapse">
		<uv-collapse-item title="文档指南" name="Docs guide">
			<text class="uv-collapse-content">{{text1}}</text>
		</uv-collapse-item>
		<uv-collapse-item title="组件全面" name="Variety components">
			<text class="uv-collapse-content">{{text2}}</text>
		</uv-collapse-item>
		<uv-collapse-item title="众多利器" name="Numerous tools">
			<text class="uv-collapse-content">{{text3}}</text>
		</uv-collapse-item>
	</uv-collapse>
</template>
<script>
	export default {
		data() {
			return {
				text1: '',
				text2: '',
				text3: ''
			}
		},
		onLoad() {
			// 模拟请求
			uni.showLoading({
				title: '请求中',
				mask: true
			})
			setTimeout(() => {
				this.text1 = '涵盖uniapp各个方面，给开发者方向指导和设计理念';
				this.text2 = '组件功能丰富，多端兼容。让您快速集成，开箱即用';
				this.text3 = '众多JS小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨';
				this.$nextTick(() => {
					// 再次调用 init 重新初始化内部高度
					this.$refs.collapse.init();
					uni.showToast({
						icon: 'success',
						title: '请求成功'
					})
					uni.hideLoading();
				})
			}, 1000)
		}
	}
</script>

# 控制面板的初始状态，以及是否可以操作

  • 通过uv-collapse-item的name属性，并在uv-collapse中指定数组value可以让面板初始化时为打开状态
  • 通过uv-collapse-item的disabled属性，设置是否禁用
<template>
	<uv-collapse :value="['2']">
		<uv-collapse-item title="文档指南">
			<text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>
		</uv-collapse-item>
		<uv-collapse-item disabled title="组件全面">
			<text class="uv-collapse-content">组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
		</uv-collapse-item>
		<uv-collapse-item name="2" title="众多利器">
			<text class="uv-collapse-content">众多JS小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
		</uv-collapse-item>
	</uv-collapse>
</template>

# 手风琴模式

通过uv-collapse的accordion属性设置为true，这样可以开启手风琴模式

<template>
	<uv-collapse accordion>
		<uv-collapse-item title="文档指南">
			<text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>
		</uv-collapse-item>
		<uv-collapse-item title="组件全面">
			<text class="uv-collapse-content">组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
		</uv-collapse-item>
		<uv-collapse-item title="众多利器">
			<text class="uv-collapse-content">众多JS小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
		</uv-collapse-item>
	</uv-collapse>
</template>

# 自定义标题和内容

通过设置slot来自定义标题和内容

注意

微信小程序不支持<slot slot="title"><slot name="title"></slot></slot>写法，微信小程序暂不支持自定义标题和内容。

<template>
	<view class="uv-page__item">
		<uv-collapse accordion>
			<uv-collapse-item title="文档指南">
				<text slot="title" class="uv-page__item__title__slot-title">文档指南</text>
				<text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>
			</uv-collapse-item>
			<uv-collapse-item title="组件全面">
				<uv-icon name="tags-fill" size="20" slot="icon"></uv-icon>
				<text class="uv-collapse-content">组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
			</uv-collapse-item>
			<uv-collapse-item title="众多利器">
				<text slot="value" class="uv-page__item__title__slot-title">自定义内容</text>
				<text class="uv-collapse-content">众多JS小工具，是您开发过程中召之即来的利器</text>
			</uv-collapse-item>
		</uv-collapse>
	</view>
</template>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Collapse Props

参数 说明 类型 默认值 可选值
value 当前展开面板uv-collapse-item属性name，非手风琴模式必须为数组，eg：['2']。手风琴模式为字符串或数字。 String | Number | Array - -
accordion 是否手风琴模式 Boolean false true | false
border 是否显示外边框 Boolean true true | false

# CollapseItem Props

参数 说明 类型 默认值 可选值
title 面板标题 String - -
value 标题右侧内容 String - -
label 标题下方的描述信息 String - -
disabled 是否禁止面板的展开和收起 Boolean false true | false
isLink 是否展示右侧箭头并开启点击反馈 Boolean true true | false
clickable 是否开启点击反馈 Boolean true true | false
border 是否显示内边框 Boolean true true | false
name 唯一标识符。如不设置，默认用当前collapse-item的索引值 String | Number - -
icon 标题左侧图标，可为绝对路径的图片或内置图标 String - -
duration 面板展开收起的过渡时间，单位ms Number 300 -

# Collapse Events

注意：请在<uv-collapse></uv-collapse>上监听此事件

事件名 说明 回调参数
@change 当前激活面板展开/关闭时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array) activeNames: String | Array
@open 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array) activeNames: String | Array
@close 当前激活面板关闭时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array) activeNames: String | Array

# Collapse Methods

注意：此方法需要通过ref调用

方法 说明
init 重新初始化内部高度计算，用于异步获取内容的情形，请结合this.$nextTick()使用

# CollapseItem Slots

微信小程序不支持slot写法

名称 说明
- 主体部分的内容
title 标题内容
icon 左侧icon
value 右侧value
right-icon 右侧icon

← Grid 宫格布局 →