文本 xText

---

在线预览

在线模拟尺寸:

介绍

支持多文本高亮显示，目前uniapp x 4.0.1+正则。 可允许拓展：比如根据正则高亮电话号码，邮箱等，点击后打电话，发邮件。使用时一定要注意:尽量标签内容写文本,不要用label属性,label属性是用来高亮和正则的

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-text/x-text.uvue

使用

<x-text></x-text>

Props 属性

名称	说明	类型	默认值
_style	自定文件标签的样式	string	""
_class	自定文件标签的类,仅对标签插槽内的有效,如果使用label属性会变成richtext渲染,因为类将失效.	string	""
label	源文本，显示 的文本。	string	""
highlight	需要特别高亮的词	Array	() : string[] => [] as string[]
highlightReg	高亮的正则, 请尽量不要和highlight字段结果集重叠, 也不要提供的正则数组出现重叠混乱。 默认是正则电话，邮箱	Array	() : string[] => [] as string[]
highlightStyle	高亮文本的自定义样式	string	""
lines	最多显示几行，默认0不限制。 超过了此行会出现省略号。	number	0
selectable	是否允许复制。	boolean	false
color	文本颜色	string	""
darkColor	暗黑时的文本颜色，如果你不提供，将自动反转。 自动反转是根据亮度反转，色相不变。	string	""
highlightColor	高亮颜色	string	"primary"
lineHeight	行高	string	"1.7"
fontSize	文字大小。	string	""

Events 事件

名称	参数	说明
click	-	点击时触发
item-click	undefinedstr: string	正则的项目被点击

Slots 插槽

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

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/chongyong/text

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-navbar bg-color="#f5f5f5" active-bg-color="white" title="文本 Text"></x-navbar>
		
		<x-sheet>
		
			<x-text font-size="18" class="text-weight-b mb-8 ">文本 Text</x-text>
			
			<x-text >使用时一定要注意:尽量标签内容写文本,不要用label属性,label属性是用来高亮和正则的尽量标签内容写文本,不要用label属性,label属性是用来高亮和尽量标签内容写文本,不要用label属性,label属性是用来高亮和</x-text>
			
			<x-text class="line-10 " :highlight="['高亮显示','正则','邮箱']"
				label="支持多文本高亮显示，比如根据正则高亮电话号码，邮箱等，点击后打电话，发邮件。**"></x-text>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class="text-weight-b mb-8">高亮文本,可自定样式</x-text>
			<x-text>正则电话，邮箱高亮</x-text>
			<x-text @item-click="testClick" highlightColor="red"
				:highlightReg="['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待官方修复.">
			</x-text>
		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">使用插槽功能丢失</x-text>
			<x-text :lines="2">
				使用插槽，当作普通text标签使用，高亮功能和后续的拓展将会失效。
				使用插槽，当作普通text标签使用，高亮功能和后续的拓展将会失效。
			</x-text>
		</x-sheet>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const lines = ref(0)
	const testClick = (str : string) => {
		uni.showToast({ title: str, icon: 'none' })
	}
</script>


<style lang="scss">

</style>