Text 文本

组件类型：UxTextComponentPublicInstance

扩展支持拨打电话，格式化日期，脱敏，超链接...等功能

平台兼容性

Android	iOS	web	鸿蒙 Next	小程序
√	√	√	x	x

Props

属性名	类型	默认值	说明
name	String	-	标识符/网页名称
theme	String	'info'	主题颜色
text	String	-	文本内容
color	String	-	文本颜色优先级高于主题
darkColor	String	-	深色
size	Number	`$ux.Conf.fontSize`	字体大小
lines	Number	0	文本显示的行数，若大于0，超出此行数，将会显示省略号
bold	Boolean	false	字体加粗
align	String	'left'	文本对齐方式可选值: left center right
decoration	String	'none'	文字装饰
lineHeight	Number	1.2	文本行高
prefixIcon	String	-	前置图标暂不支持因为有bug
suffixIcon	String	-	后置图标
iconSize	Number	`$ux.Conf.fontSize`	图标字体大小
customFont	String	-	网络字体路径或自定义字体路径
customFamily	String	-	字体family
selectable	Boolean	false	文本是否可选
space	String	-	显示连续空格
decode	Boolean	false	是否解码
mode	String	'text'	文本处理的匹配模式
format	String	-	格式化规则
href	String	-	链接地址
call	Boolean	false	是否拨打电话

theme

值	说明
primary	主题色
success	成功色
error	错误色
warning	警告色
info	信息色

darkColor

值	说明
none	不显示
auto	自动适配深色模式
color	其他颜色

align

值	说明
left	左对齐
center	居中对齐
right	右对齐

decoration

值	说明
none	无
underline	下划线
line-through	中划线

space

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

mode

值	说明
text	普通文本
phone	手机号
name	姓名
date	日期
link	超链接
money	金额

format

值	说明
encrypt	脱敏加密
verify	合法性校验
cmoney	大写金额
qmoney	金额千分制
wmoney	金额万分制
yyyy-MM-dd	格式化日期
yyyy年MM月dd日	格式化日期
yyyy-MM-dd HH:mm:ss	格式化日期

Events

事件名	说明	参数
click	点击事件	event: MouseEvent

示例代码

htmlscriptstyle

html

<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag" title="文本" :bold="true">
				<ux-text text="扩展支持拨打电话，格式化日期，脱敏，超链接...等功能"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="文本" text="https://www.uxframe.cn/component/basic/text.html" mode="link"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
				<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
				<ux-row>
					<ux-text theme="primary" text="主色" :mr="5"></ux-text>
					<ux-text theme="warning" text="警告" :mr="5"></ux-text>
					<ux-text theme="success" text="成功" :mr="5"></ux-text>
					<ux-text theme="error" text="错误" :mr="5"></ux-text>
					<ux-text theme="info" text="文本"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="拨打电话" :bold="true">
				<ux-text text="支持拨打电话，原生实现" :mb="15"></ux-text>
				<ux-row>
					<ux-text theme="primary" mode="phone" :call="true" text="18888888888"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="日期格式化" :bold="true">
				<ux-text text="支持 yyyy年MM月dd日、yyyy-MM-dd ...等日期格式化" :mb="15"></ux-text>
				<ux-row>
					<ux-text theme="warning" mode="date" :text="date" format="yyyy年MM月dd日"></ux-text>
					<ux-text theme="success" mode="date" :text="date" format="yyyy-MM-dd" :ml="10"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="脱敏" :bold="true">
				<ux-text text="支持手机号、姓名等信息脱敏" :mb="15"></ux-text>
				<ux-row>
					<ux-text theme="error" mode="name" format="encrypt" text="李小四"></ux-text>
					<ux-text theme="primary" mode="phone" format="encrypt" text="18888888888" :ml="10"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="超链接" :bold="true">
				<ux-text text="支持超链接，可直接跳转" :mb="15"></ux-text>
				<ux-row>
					<ux-text mode="link" text="https://uniapp.dcloud.net.cn/uni-app-x"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="金额格式化" :bold="true">
				<ux-text text="支持金额中文、千分位、万分位格式化" :mb="15"></ux-text>
				<ux-col>
					<ux-text theme="warning" mode="money" format="qmoney" text="699888.88"></ux-text>
					<ux-text theme="success" mode="money" format="wmoney" text="699888.88" :mt="10"></ux-text>
					<ux-text theme="error" mode="money" format="cmoney" text="699888.88" :mt="10"></ux-text>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="图标" :bold="true">
				<ux-text text="支持前置、后置图标" :mb="15"></ux-text>
				<ux-row>
					<ux-text theme="primary" text="前置" prefix-icon="arrowleft"></ux-text>
					<ux-text theme="warning" text="后置" suffix-icon="arrowright" :ml="10"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="超出隐藏" :bold="true">
				<ux-text text="支持超出隐藏，可设置最大显示行数" :mb="15"></ux-text>
				<ux-col style="width: 100%;">
					<ux-text theme="success" space="emsp" :lines="2" text="让  uniappx  开发更简单! 就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？"></ux-text>
				</ux-col>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
		
	</ux-page>
</template>

<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag" title="文本" :bold="true">
				<ux-text text="扩展支持拨打电话，格式化日期，脱敏，超链接...等功能"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="文本" text="https://www.uxframe.cn/component/basic/text.html" mode="link"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
				<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
				<ux-row>
					<ux-text theme="primary" text="主色" :mr="5"></ux-text>
					<ux-text theme="warning" text="警告" :mr="5"></ux-text>
					<ux-text theme="success" text="成功" :mr="5"></ux-text>
					<ux-text theme="error" text="错误" :mr="5"></ux-text>
					<ux-text theme="info" text="文本"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="拨打电话" :bold="true">
				<ux-text text="支持拨打电话，原生实现" :mb="15"></ux-text>
				<ux-row>
					<ux-text theme="primary" mode="phone" :call="true" text="18888888888"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="日期格式化" :bold="true">
				<ux-text text="支持 yyyy年MM月dd日、yyyy-MM-dd ...等日期格式化" :mb="15"></ux-text>
				<ux-row>
					<ux-text theme="warning" mode="date" :text="date" format="yyyy年MM月dd日"></ux-text>
					<ux-text theme="success" mode="date" :text="date" format="yyyy-MM-dd" :ml="10"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="脱敏" :bold="true">
				<ux-text text="支持手机号、姓名等信息脱敏" :mb="15"></ux-text>
				<ux-row>
					<ux-text theme="error" mode="name" format="encrypt" text="李小四"></ux-text>
					<ux-text theme="primary" mode="phone" format="encrypt" text="18888888888" :ml="10"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="超链接" :bold="true">
				<ux-text text="支持超链接，可直接跳转" :mb="15"></ux-text>
				<ux-row>
					<ux-text mode="link" text="https://uniapp.dcloud.net.cn/uni-app-x"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="金额格式化" :bold="true">
				<ux-text text="支持金额中文、千分位、万分位格式化" :mb="15"></ux-text>
				<ux-col>
					<ux-text theme="warning" mode="money" format="qmoney" text="699888.88"></ux-text>
					<ux-text theme="success" mode="money" format="wmoney" text="699888.88" :mt="10"></ux-text>
					<ux-text theme="error" mode="money" format="cmoney" text="699888.88" :mt="10"></ux-text>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="图标" :bold="true">
				<ux-text text="支持前置、后置图标" :mb="15"></ux-text>
				<ux-row>
					<ux-text theme="primary" text="前置" prefix-icon="arrowleft"></ux-text>
					<ux-text theme="warning" text="后置" suffix-icon="arrowright" :ml="10"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="超出隐藏" :bold="true">
				<ux-text text="支持超出隐藏，可设置最大显示行数" :mb="15"></ux-text>
				<ux-col style="width: 100%;">
					<ux-text theme="success" space="emsp" :lines="2" text="让  uniappx  开发更简单! 就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？就问你信不信？"></ux-text>
				</ux-col>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
		
	</ux-page>
</template>

<script setup>
	let title = ref('')
	const date = new Date().getTime().toString()
	
	onLoad((e: OnLoadOptions) => {
		title.value = e['title'] ?? ''
	})
</script>

<script setup>
	let title = ref('')
	const date = new Date().getTime().toString()
	
	onLoad((e: OnLoadOptions) => {
		title.value = e['title'] ?? ''
	})
</script>

css

<style lang="scss">
	
</style>

<style lang="scss">
	
</style>

Text 文本 ​

平台兼容性 ​

Props ​

theme ​

darkColor ​

align ​

decoration ​

space ​

mode ​

format ​

Events ​

示例代码 ​

Text 文本

平台兼容性

Props

theme

darkColor

align

decoration

space

mode

format

Events

示例代码