tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
419
1.8m

查看更多 xMore ​

预览

介绍 ​

让内容超过指定高时自动隐藏内容.

平台兼容 ​

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

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-more/x-more.uvue

使用 ​

ts

<x-more></x-more>

Props 属性 ​

名称说明类型默认值
width组件宽度
string"auto"
height被关闭时的高度。
string"60"
actionGap操作操作栏区域上下间隙高度。
string"10"
modelValue当前打开的状态
booleanfalse
activeColor激活后的文本色,默认是读取全局色
string""
unActiveColor未激活后的文本色
string"#a6a6a6"
text打开和关闭状态的文本
"展开更多", "收起更多"
Array() => [] as string[]
maskBgColor遮罩的渐变的背景色
Array() => ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 0.3)']
darkMaskBgColor暗黑时遮罩的渐变的背景色
Array() => ['rgba(24, 24, 24, 1.0)', 'rgba(24, 24, 24, 0.3)']
disabled是否禁用展开。
booleanfalse
showMoreBtn是否显示开启和关闭按钮,
因为各个手机屏幕可能不一样,可能会根据行数自行决定是否
要显示展开和关闭按钮,请通过此自行判断.
booleantrue

Events 事件 ​

名称参数说明
changeopened: boolean 状态切换时变换
clickopened: boolean点击展开的按钮时触发
update:modelValue--

Slots 插槽 ​

名称说明数据
default默认插槽 isOpened: boolean
action底部操作栏插槽 isOpened: boolean

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/zhanshi/more

示例源码 ​

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">查看更多 xMore</x-text>
		<x-text color="#999999">更多信息展示使用,在使用时注意内部不要放动态异步加载内容。</x-text>
	</x-sheet>
	<x-sheet>
		<x-more>
			<x-text class="line-10">
				随后，行刑者用一根管子放出温水顺着死刑犯的手臂往下流。并在地上放置一个铁盆，让水流到盆里的声音“嘀哒嘀哒“作响，给罪犯造成是自己流血的错觉。
				随着水流越来越慢，水温越来越低，声音越来越小。
				没过多久，罪犯就断气而身亡。尸检发现，罪犯死于心脏麻痹。
				随后，行刑者用一根管子放出温水顺着死刑犯的手臂往下流。并在地上放置一个铁盆，让水流到盆里的声音“嘀哒嘀哒“作响，给罪犯造成是自己流血的错觉。
				随着水流越来越慢，水温越来越低，声音越来越小。
				没过多久，罪犯就断气而身亡。尸检发现，罪犯死于心脏麻痹。
			</x-text>
			<x-image src="https://store.tmui.design/api/randomImg?random=vsf"></x-image>
		</x-more>
		<x-divider class="my-24"></x-divider>
		<x-more :disabled="true" :text="['付费解锁','关闭详情']">
			<x-text class="line-10">
				禁用无法打开
				随后，行刑者用一根管子放出温水顺着死刑犯的手臂往下流。并在地上放置一个铁盆，让水流到盆里的声音“嘀哒嘀哒“作响，给罪犯造成是自己流血的错觉。
				随着水流越来越慢，水温越来越低，声音越来越小。
				没过多久，罪犯就断气而身亡。尸检发现，罪犯死于心脏麻痹。
				随后，行刑者用一根管子放出温水顺着死刑犯的手臂往下流。并在地上放置一个铁盆，让水流到盆里的声音“嘀哒嘀哒“作响，给罪犯造成是自己流血的错觉。
				随着水流越来越慢，水温越来越低，声音越来越小。
				没过多久，罪犯就断气而身亡。尸检发现，罪犯死于心脏麻痹。
			</x-text>
			<x-image src="https://store.tmui.design/api/randomImg?random=vsf"></x-image>
		</x-more>
		<x-divider class="my-24"></x-divider>
		<x-more height="80">
			<x-text font-size="18" class=" text-weight-b mb-8">可以设置高度</x-text>
			<x-text class="line-10">
				并在地上放置一个铁盆，让水流到盆里的声音“嘀哒嘀哒“作响，给罪犯造成是自己流血的错觉。
				随着水流越来越慢，水温越来越低，声音越来越小。
			</x-text>
			<x-image src="https://store.tmui.design/api/randomImg?random=666df"></x-image>
		</x-more>
	</x-sheet>

	<view class="py-32"></view>

</template>

<script setup lang="ts">

</script>

<style lang="scss">

</style>
最近更新