Text 文本

集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

基本使用

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

Props

名称	描述	类型	默认值	可选值
mode	文本类型	String	'default'	'default', 'date', 'price', 'sensitive', 'light'
format	文本格式化模式	String	'yyyy-mm-dd hh:MM:ss'	-
decimals	小数位数	Number	0	-
lines	显示行数	Number	-1	-
decimalPoint	小数点符号	String	'￥'	-
overflow	是否允许文本溢出	Boolean	true	true, false
patternsValue	自定义值模式数组	String[]	[]	-
patternsReg	自定义正则表达式模式数组	String[]	[]	-
patternsColor	模式匹配文本颜色	String	'red'	-
selectable	文本是否可选	Boolean	false	true, false
space	显示连续空格	String	'-'	'-', 'ensp', 'emsp', 'nbsp'
decode	是否解码	Boolean	false	true, false
size	按钮尺寸	String	'medium'	'large', 'medium', 'small', 'mini'
type	组件场景	String	''	'info', 'primary', 'error', 'warning', 'success'
disabled	是否禁用	Boolean	false	true, false
stop	是否阻止事件冒泡	Boolean	false	true, false
hover	是否有鼠标悬停效果	Boolean	false	true, false
effect	效果	String	''	'normal', 'dark', 'light', 'plain'

Events

事件名	描述	回调参数	版本
click	文本点击事件	(e: UniEvent)	-

Methods

名称	描述	参数
lightview	生成高亮文本视图	-
textFormat	格式化文本，用于高亮显示	(label: string)