Skip to content
On this page
你当前查看的文档是tmui3.2.0(已不再支持NVUE)
[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

常用组件

文本 TmText

允许正则高亮或者,词高亮.

🌶️ 示例

查看模拟效果
示例模板
vue
<template>
    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">文本 TmText</tm-text>
        <view>
            <tm-text>事实上,如果你没有特殊要求可以不用此组件,用自带的text配合我的css库一样比较方便轻巧</tm-text>
            <tm-text @item-click="testClick" class="line-10" :heightLight="['高亮显示', '正则', '邮箱']"
                label="支持多文本高亮显示,比如根据正则高亮电话号码,邮箱等,点击后打电话,发邮件。"></tm-text>
        </view>
    </tm-sheet>
    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">高亮文本,可自定样式</tm-text>
        <view>
            <tm-text>正则电话,邮箱高亮</tm-text>
            <tm-text @item-click="testClick" height-light-color="red" :height-light-reg="[
                '1[3456789]\\d{9}',
                '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}',
                '《(.*?)》',
            ]" label="邮箱等,点击后打电话:17970689633,发邮件:qq@qq.com。高文本可以被点击触《服务隐私协议》发事件,高亮事件触发目《隐私协议》前uniappx 3.99有bug待官方修复.">
            </tm-text>
        </view>
    </tm-sheet>

    <tm-sheet>
        <tm-text font-size="36" class="text-weight-b mb-16 d-block">使用插槽功能丢失</tm-text>
        <view>
            <tm-text :lines="2">
                使用插槽,当作普通text标签使用,高亮功能和后续的拓展将会失效。
                使用插槽,当作普通text标签使用,高亮功能和后续的拓展将会失效。
            </tm-text>
        </view>
    </tm-sheet>
</template>
<script setup lang="ts">
const testClick = (text: string) => {
    uni.showToast({ title: text, icon: "none" });
};
</script>
<style lang="scss"></style>

🌶️ 兼容性

平台兼容

H5uniAPP小程序version
☑️☑️☑️☑️

🌱 参数

参数名类型默认值描述
labelstring|number''文本内容这个prop用于接收显示在组件中的文本或数字
heightLightArray<string>():string[]=>[]asstring[]需要特别高亮的词
heightLightRegArray<string>()=>[]高亮正则用于定义文本中哪些部分应该被高亮显示的正则表达式数组
heightLightStylestring""高亮文本的自定义样式
linesnumber|string0行数控制文本显示时应该占用的行数(如果组件支持此功能)
selectablebooleanfalse是否可选指示文本是否可以被用户选择(如通过长按选择)
colorstring"#333"文本颜色定义文本的主要颜色
darkColorstring""暗色模式颜色在暗色模式下文本的颜色(如果组件支持暗色模式)
heightLightColorstring"primary"高亮颜色文本中应该被高亮显示的部分的颜色
lineHeightstring|number"1.5"行高文本的行高设置
fontSizestring|number""字体大小文本的字体大小设置

🌹 事件

事件名参数返回数据描述
click名称:word,点击的文本内容,-文本点击
itemClick名称:word,点击的文本内容,-正则的文本被点击

🌽 slot插槽

插槽名数据描述
default-默认文本插槽,如果使用插槽,那么相关特性功能将会失效。

🥗 ref方法

方法名参数返回值描述