Text (文本)

支持日期格式化,敏感信息隐藏,金额格式化处理,高亮文本显示,且支持插槽高亮显示

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page title='文本' main-class='p-30'>
		<t-card title="Text 文本" main-class="mb-30" sub-title="丰富的主题色,支持日期格式化,敏感信息隐藏,金额格式化处理,高亮文本显示,且支持插槽高亮显示"></t-card>
		<t-section title="主题颜色" main-class='mb-30' />
		<t-row main-class="mb-30 tdr tdb tdp">
			<t-text main-class="mr-15" @click="test" :hover="true">默认</t-text>
			<t-text main-class="mr-15" type="success" :disabled="true">成功</t-text>
			<t-text main-class="mr-15" type="error">危险</t-text>
			<t-text main-class="mr-15" type="warning">警告</t-text>
			<t-text main-class="mr-15" type="primary">主色</t-text>
		</t-row>
		<t-section title="主题-size" main-class='mb-30' />
		<t-row main-class="mb-30 tdr tdb tdp">
			<t-text main-class="mr-15" size="large" type="success">large</t-text>
			<t-text main-class="mr-15" type="error" size="medium">medium</t-text>
			<t-text main-class="mr-15" type="error" size="small">small</t-text>
			<t-text main-class="mr-15" type="error" size="mini">mini</t-text>
		</t-row>
		<t-section title="主题-effect" main-class='mb-30' />
		<t-row main-class="mb-30 tdr tdb tdp">
			<t-text effect="normal" main-class="mr-15" type="error" @click="test" :hover="true">默认</t-text>
			<t-text effect="dark" main-class="mr-15" type="error">成功</t-text>
			<t-text effect="disabled" main-class="mr-15" type="error">危险</t-text>
			<t-text effect="light" main-class="mr-15" type="error">警告</t-text>
		</t-row>
		<t-section title="日期格式化" main-class='mb-30' />
		<t-col main-class="mb-30 tdr tdb tdp">
			<t-text type="info" main-class="mb-15" mode="date" text="2023-01-02T02:03:05"></t-text>
			<t-text type="warning" main-class="mb-15" mode="date" text="2023/01/02 02:03:05"></t-text>
			<t-text type="primary" main-class="mb-15" mode="date" text="2023-01-02 02:03:05"></t-text>
			<t-text type="error" main-class="mb-15" mode="date" format="d天h时M分s秒" text="1612959739000"></t-text>
			<t-text type="success" main-class="mb-15" mode="time" format='hh:MM:ss' text="50000"></t-text>
			<t-text type="primary" main-class="mb-15" mode="date" format="yyyy-mm-dd"
				text="2023-01-02T02:03:05"></t-text>
			<t-text type="primary" main-class="mb-15" mode="date" format="yyyy-mm-dd" :text="textValue"></t-text>
			<t-text type="success" main-class="mb-15" mode="time" format="d天h时M分s秒" text="50000"></t-text>
			<button type='s' main-class="m-30" size='small' @click="test">测试变量</button>
		</t-col>
		<t-section title="敏感信息隐藏" main-class='mb-30' />
		<t-col main-class="mb-30 tdr tdb tdp">
			<t-text mode="sensitive" main-class="mb-15" type="e" text="张"></t-text>
			<t-text mode="sensitive" main-class="mb-15" type="s" text="王李"></t-text>
			<t-text mode="sensitive" main-class="mb-15" type="w" text="赵钱孙"></t-text>
			<t-text mode="sensitive" main-class="mb-15" type="p" text="18059547994"></t-text>
		</t-col>
		<t-section title="显示金额(显示5位小数)" main-class='mb-30' />
		<t-col main-class="mb-30 tdr tdb tdp">
			<t-text mode="price" main-class="mb-15" type="error" :decimals="2" text="1234"></t-text>
			<t-text mode="price" main-class="mb-15" type="success" :decimals="5" text="81681-25"></t-text>
			<t-text mode="price" main-class="mb-15" type="warning" :decimals="2" text="81681-25885"></t-text>
		</t-col>
		<t-section title="高亮显示" main-class='mb-30' />
		<t-col main-class="mb-30 tdr tdb tdp">
			<t-text :patternsValue="['重点内容', '电子邮件', '电话号码']" type="s" size="l" mode="light" @click="test"
				text="此文本组件能够突出显示关键词，如电子邮件地址、电话号码等，点击可以快速启动相关操作，如拨打电话或发送邮件。">
			</t-text>
			<t-text :patternsReg="['\\b1[3456789]\\d{9}\\b','\\b[a-zA-Z0-9-_%+-]+@[a-zA-Z0-9--]+\\-[a-zA-Z]{2,}\\b']"
				main-class="p-30 slh-45" mode="light" text="点击电话号码: 15329438335 或 电子邮件: test@example-com，以触发相应操作">
			</t-text>
		</t-col>
		<t-section title="隐藏-省略号" main-class='mb-30' />
		<t-col main-class="mb-30 tdr tdb tdp">
			<t-text type="warning" :lines="1" main-class="w-400 oh slh-100">这是一段很长的文本，用于测试单行超出隐藏的效果。</t-text>
			<t-text type="error" :lines="1" main-class="w-400" :overflow="true">这段文本也是用于测试单行超出隐藏，但禁用了省略号。</t-text>
		</t-col>
		<t-section title="自定义样式覆盖" main-class='mb-30' />
		<t-col main-class="mb-30 tdr tdb tdp">
			<t-text type="i" main-class="c-#ff5500 slh-50" :overflow="false">这段文本展示了如何通过自定义样式来改变文本的显示效果</t-text>
		</t-col>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				textValue: '1612959739000',
			};
		},
		methods: {
			test() {
				this.textValue = '1602859739000'
			}
		},
		onLoad() {

		}
	}
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
decimals	Number	1	金额显示时显示小数点的位数
lines	Number	1	文本显示和行数，超出就会隐藏
decimalPoint	String	￥	金额表示符文本
overflow	Boolean	false	是否允许文本溢出
patternsValue	any	[]	需要高亮显示文本的内容。
patternsReg	any	``	自定义匹配高亮正则表达
patternsColor	String	#ff0000	匹配高亮显示的文本
mode	String	default	字符串格式化处理方式	default: 默认不处理 date: 处理为日期格式。配合format一起使用 price: 格式化为金额显示 sensitive: 隐藏敏感信息 light: 部分文本高亮显示
format	String	yyyy-mm-dd hh:MM:ss	mode=='date' 日期格式化格式
text	String	``	显示的文本

事件

名称	返回参数	说明
click	(e : UniPointerEvent)	-

插槽

名称	返回值	说明
default	-