Skip to content
On this page

组件库文档 tmui.design

文本 Text

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


🌶️ 文本 Text 示例

查看模拟效果
示例模板
vue
<template>
    <tm-app>
        <tm-sheet>
            <tm-text :font-size="24" _class="font-weight-b" label="基本示例"></tm-text>
            <tm-divider></tm-divider>
            <tm-text label="这是文本标签,文本显示必需要使用此标签"></tm-text>
        </tm-sheet>
        <tm-sheet>
            <tm-text :font-size="24" _class="font-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"行高

🌹 事件

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

🌽 slot插槽

默认default

🥗 ref方法

方法名参数返回值描述

😡 贡献者:小超1263375375