tm-more 展开更多

提醒

本组件1.1.2版本新增。

🎉目录导航

👉使用方法,跟数1,2,3一样简单

基本示例

<template>
	<view>
		<tm-menubars title="展开更多" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24" :padding="[0, 0]" color="blue">
			<tm-more iconColor="white" bgColor="blue">
				<view class="text-size-n pa-24">
					以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：
					列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，
					单元格颜色的控制。超过宽度自动横向拖动。
					<tm-images src="https://picsum.photos/300"></tm-images>
				</view>
			</tm-more>
		</tm-sheet>
		<tm-sheet :shadow="24" :padding="[0, 0]">
			<tm-more :isRemovBar="true">
				<view class="text-size-n pa-24">
					展开后，底下的更多将不再显示-----以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：
					列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，
					单元格颜色的控制。超过宽度自动横向拖动。
				</view>
			</tm-more>
		</tm-sheet>
		<tm-sheet :shadow="24" :padding="[0, 0]" color="blue">
			<tm-more iconColor="white" bgColor="blue">
				<template v-slot:default>
					<view class="text-size-n pa-24">
						以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：
						列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，
						单元格颜色的控制。超过宽度自动横向拖动。
						<tm-images src="https://picsum.photos/300"></tm-images>
					</view>
				</template>
				<template v-slot:more="{ data }">
					<text class="text-white">{{ data ? '收缩更多' : '展开更多' }}</text>
				</template>
			</tm-more>
		</tm-sheet>
		<tm-sheet :shadow="24" :padding="[0, 0]">
			<tm-more><view class="text-size-n pa-24">没有超过指定高度不显示展开更多按钮条</view></tm-more>
		</tm-sheet>
	</view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {}
	}
</script>

1
2
3
4
5
6
7
8
9
10

👉props属性表

属性名称	类型	可选值	默认值	说明
maxHeight	String	任意整数	maxHeight	限定多高时展示更多按钮,单位upx
disabled	Boolean	true/false	false	是否禁用，禁用后无法展开更多
open	Boolean	true/false	false	需要open.sync，是否展开更多，可不必填此属性。此值主要是用来手动控制展开和关闭。
isRemovBar	Boolean	true/false	false	打开后，是否隐藏展开更多
icon-color	String	任意主题色名称	grey	展开更多的图标颜色
bg-color	String	任意主题色名称	white	展开更多的背景颜色
label	String	-	展开阅读更多	关闭后更多的提示文字
open-label	String	-	收缩阅读更多	打开后更多的提示文字

👉slot插槽

插槽名称	返回参数	返参类型	说明
default	-	-	默认插槽
more	data	Boolean	展开更多的插槽，用来自定义展开更多的样式和布局

插槽数据用法如下：

<template v-slot:more="{ data }">
	<text class="text-white">{{ data ? '收缩更多' : '展开更多' }}</text>
</template>

1
2
3

👉事件

事件名称	返回参数	返参类型	说明
@click	-	-	点击时触发
@change	true/false	Boolean	展开更多变换时触发

👉更新日志

2021年8月20日14:8:5 初始版本。

tmzdy 于 2022/12/7 编辑报错？ | 评论？

# tm-more 展开更多

# 👉使用方法,跟数1,2,3一样简单

# 👉props属性表

# 👉slot插槽

# 👉事件

# 👉更新日志

tm-more 展开更多

👉使用方法,跟数1,2,3一样简单

👉props属性表

👉slot插槽

👉事件

👉更新日志