Collapse

Collapse 折叠面板。

组件结构

<template>
	<view class="tui-collapse" :style="{backgroundColor:bgColor}">
		<view class="tui-collapse-head" :style="{backgroundColor:hdBgColor}" @tap.stop="handleClick">
			<view class="tui-header" :class="{'tui-opacity':disabled}">
				<slot name="title"></slot>
				<view class="tui-collapse-icon tui-icon-arrow" :class="{'tui-icon-active':isOpen}" :style="{color:arrowColor}" v-if="arrow"></view>
			</view>
		</view>
		<view class="tui-collapse-body" :style="{backgroundColor:bdBgColor,transform: isOpen ? 'translateY(0)' : `translateY(${translateY})`,height:isOpen?height:'0'}">
			<slot name="content"></slot>
		</view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: "tuiCollapse",
		props: {
			//collapse背景颜色
			bgColor: {
				type: String,
				default: 'none'
			},
			//collapse-head 背景颜色
			hdBgColor: {
				type: String,
				default: '#fff'
			},
			//collapse-body 背景颜色
			bdBgColor: {
				type: String,
				default: 'none'
			},
			//collapse-body实际高度 open时使用
			height: {
				type: String,
				default: 'auto'
			},
			//close时translateY ,当bd高度固定时,建议值为0
			translateY: {
				type: String,
				default: '-50%'
			},
			//索引
			index: {
				type: Number,
				default: 0
			},
			//当前索引,index==current时展开
			current: {
				type: Number,
				default: -1
			},
			// 是否禁用
			disabled: {
				type: [Boolean, String],
				default: false
			},
			//是否带箭头
			arrow:{
				type: [Boolean, String],
				default: true
			},
			//箭头颜色
			arrowColor:{
				type: String,
				default: "#333"
			}
		},
		watch: {
			current() {
				this.updateCurrentChange()
			}
		},
		created() {
			this.updateCurrentChange()
		},
		data() {
			return {
				isOpen: false
			};
		},
		methods: {
			updateCurrentChange() {
				this.isOpen = this.index == this.current
			},
			handleClick() {
				if (this.disabled) return;
				this.$emit("click", {
					index: Number(this.index)
				})
			}
		}
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
bgColor String collapse背景颜色 none
hdBgColor String collapse-head 背景颜色 #fff
bdBgColor String collapse-body 背景颜色 none
height String collapse-body实际高度 open时使用 auto
translateY String close时translateY ,当bd高度固定时,建议值为0 -50%
index Number 当前折叠面板在列表中的索引 0
current Number 当前索引,index==current时展开 -1
disabled [Boolean, String] 是否禁用 false
arrow [Boolean, String] 是否带箭头 true
arrowColor String 箭头颜色 #333

methods

名称 描述
updateCurrentChange 更新折叠面板状态
handleClick 切换点击事件

示例

... 此处省略n行,下载源码查看

预览图