常用组件
文本 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>
🌶️ 兼容性
平台兼容
H5 | uniAPP | 小程序 | version |
---|---|---|---|
☑️ | ☑️ | ☑️ | ☑️ |
🌱 参数
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
label | string|number | '' | 文本内容这个prop用于接收显示在组件中的文本或数字 |
heightLight | Array<string> | ():string[]=>[]asstring[] | 需要特别高亮的词 |
heightLightReg | Array<string> | ()=>[] | 高亮正则用于定义文本中哪些部分应该被高亮显示的正则表达式数组 |
heightLightStyle | string | "" | 高亮文本的自定义样式 |
lines | number|string | 0 | 行数控制文本显示时应该占用的行数(如果组件支持此功能) |
selectable | boolean | false | 是否可选指示文本是否可以被用户选择(如通过长按选择) |
color | string | "#333" | 文本颜色定义文本的主要颜色 |
darkColor | string | "" | 暗色模式颜色在暗色模式下文本的颜色(如果组件支持暗色模式) |
heightLightColor | string | "primary" | 高亮颜色文本中应该被高亮显示的部分的颜色 |
lineHeight | string|number | "1.5" | 行高文本的行高设置 |
fontSize | string|number | "" | 字体大小文本的字体大小设置 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click | 名称:word,点击的文本内容, | - | 文本点击 |
itemClick | 名称:word,点击的文本内容, | - | 正则的文本被点击 |
🌽 slot插槽
插槽名 | 数据 | 描述 |
---|---|---|
default | - | 默认文本插槽,如果使用插槽,那么相关特性功能将会失效。 |
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|