Skip to content
On this page

组件库文档 tmui.design

文本 Text

自带主题和常用属性,能根据全局主题和暗黑自动切换,必须放在tmSheet下,获得更好的主题适应能力。


🌶️ 文本 Text 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="基本示例"></tm-text>
			<tm-divider></tm-divider>
			<tm-text label="这是文本标签,文本显示必需要使用此标签"></tm-text>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="其它示例"></tm-text>
			<tm-divider></tm-divider>
			<tm-text color="red" label="颜色,这是文本标签,文本显示必需要使用此标签"></tm-text>
			<tm-text color="grey" :font-size="24" label="文字大小,这是文本标签,文本显示必需要使用此标签"></tm-text>
		</tm-sheet>
		<tm-sheet>
			<tm-text _class="text-overflow-1" label="1行带省略,这是文本标签,文本显示必需要使用此标签,文本显示必需要使用此标"></tm-text>
		</tm-sheet>
		<tm-sheet>
			<tm-text
				_class="text-overflow-2"
				label="2行带省略,这是文本标签,文本显示必需要使用此标签,文本显示必需要使用此标示必需要使用此标签,文本显示必需要使用此标"
			></tm-text>
		</tm-sheet>
		<tm-sheet>
			<tm-text selectable label="长按文本可以复制"></tm-text>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
label[String,Number]""文本标签
fontSize[Number,String]28字体大小
colorString""字体颜色
selectable[Boolean,String]false是否可选
unitv3.0.73+[Number]rpx字号单位
parentClassStringfalse组件的最外层class类,组件内嵌view的class选择器,你可能还需要使用!important来加强自定义选择器的权重
lineHeight[Number, String]"auto"行高
aging[Boolean,]false微信端根据微信字号设置自动适配文字大小。

🌹 事件

事件名参数返回数据描述
click点击事件

🌽 slot插槽

默认default

🥗 ref方法

方法名参数返回值描述

😡 贡献者:小超1263375375