tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
465
1.9m

折叠面板子组件 xCollapseItem ​

预览

介绍 ​

可单，可多开,只可放置在x-collapse直接子节点组件,为了避免重复计算和性能x-collapse-item不能通过响应式修改内容。如果确实需要请通过刷新key解决

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-collapse-item/x-collapse-item.uvue

使用 ​

ts

<x-collapse-item></x-collapse-item>

Props 属性 ​

名称说明类型默认值
name唯一标识
union""
showBottomLine是否显示底部边线
booleantrue
disabled是否禁用
booleanfalse
titleFontSize标题大小
union'16px'
titleColor标题颜色
string'#333333'
darkTitleColor暗黑时的标题颜色，如果不填写取白
string''
activeColor激活时的颜色，空值读取全局值。
string''
color背景
string'white'
darkColor暗黑时的背景，如果不填写默认取sheetDarkColor
string''
leftIcon左边图标
string''
title标题
string''
titleHeight标题高度
union'55'
titleLines标题最多显示几行出现省略号
union1
custom是否开启自定整个cell内容，如果你的整个内容要自定义实现，且复杂，请
设置为true后并在插槽内#custom写你的布局内容。
booleanfalse

Events 事件 ​

名称参数说明
clickname: stringopened: boolean点击组件标题时触发

Slots 插槽 ​

名称说明数据
left左边插槽status: boolean
title标题插槽，如果你要完全自定标题样式请在此插槽内布局status: boolean
right右边插槽status: boolean
custom自定义内容-
default默认内容插槽。-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/zhanshi/collapse

示例源码 ​

uvue
vue
<template>

	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">折叠面板 Collapse</x-text>
		<x-text color="#999999">允许单开，和多开。</x-text>
	</x-sheet>
	<x-sheet :padding="['0']">
		<x-collapse>
			<x-collapse-item left-icon="settings-line" name="1" title="系统设置">
				<x-text class="line-10">
					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
				</x-text>
				<view class="flex-1">
					<x-image width="100%" src="https://picsum.photos/id/10/200/200"></x-image>
				</view>
			</x-collapse-item>
			<x-collapse-item :showBottomLine="false" left-icon="question-line" name="2"
				title="交易帮助信息提示交易帮助信息提示交易交易帮助信息提示帮助信息提示交易帮助信息提示">
				<x-text class="line-10">
					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
				</x-text>
			</x-collapse-item>
		</x-collapse>
	</x-sheet>

	<x-sheet>
		<x-text font-size="18" class=" text-weight-b ">只能展开一个</x-text>
	</x-sheet>

	<x-sheet :padding="['0']">
		<x-collapse :multiple="false">
			<x-collapse-item @click="onClick" left-icon="ancient-gate-fill" name="3" title="如何提高低成本的效率">
				<x-text class="line-10">
					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
				</x-text>
			</x-collapse-item>
			<x-collapse-item left-icon="mail-unread-fill" name="1" title="如何使用本UI组件库,会很难吗？">
				<x-text class="line-10">
					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。

				</x-text>
				<view class="flex-1">
					<x-image width="100%" src="https://store.tmui.design/api/randomImg?random=993"></x-image>
				</view>
			</x-collapse-item>
			<x-collapse-item :disabled="true" left-icon="calendar-schedule-fill" name="6" title="如何使用本UI组件库,会很难吗？">
				<x-text class="line-10">
					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
				</x-text>

			</x-collapse-item>
			<x-collapse-item :showBottomLine="false" left-icon="discuss-fill" name="2" title="如何提高低成本的效率">
				<x-text class="line-10">

					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
				</x-text>
			</x-collapse-item>
		</x-collapse>
	</x-sheet>

</template>

<script lang="ts" setup>
	const onClick = (id : string, opened : boolean) => {
		console.log(id, opened)
	}
</script>

<style lang="scss">

</style>
最近更新