wot-design-uni/docs/component/text.md

Text 文本

1.3.4 版本提供

基本用法

设置 text 设置文本内容。推荐您使用:text='value'的形式。

<wd-text
  text="芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。"
></wd-text>

设置主题

通过type参数设置文本主题，我们提供了五类属性：primary error success warning info-默认。

<wd-text type="primary" text="主色"></wd-text>
<wd-text type="error" text="错误"></wd-text>
<wd-text type="success" text="成功"></wd-text>
<wd-text type="warning" text="警告"></wd-text>
<wd-text text="默认"></wd-text>

自定义字体颜色

设置 color 属性。

<wd-text
  text="芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。"
  color="#36B8C2"
></wd-text>

是否粗体

设置 bold 属性。

<wd-text
  text="芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。"
  bold
></wd-text>

字体大小

设置 size 属性。

<wd-text
  text="芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。"
  size="16px"
></wd-text>

脱敏

设置 format 属性,当 mode 为 phone``name时生效。

<wd-text text="李四" mode="name" :format="true"></wd-text>
<wd-text text="张长三" mode="name" :format="true"></wd-text>
<wd-text text="18888888888" mode="phone" :format="true"></wd-text>

事件

<wd-text
  text="芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。"
  @click="clickTest"
></wd-text>

function clickTest() {
  console.log(1)
}

Attributes

参数	说明	类型	可选值	默认值	最低版本
type	主题类型	string	'primary' / 'error' / 'warning' / 'success'	default	1.3.4
text	文字	string	-		1.3.4
size	字体大小	string	-	-	1.3.4
mode	文本处理的匹配模式	string	'text-普通文本' / 'date - 日期' / 'phone - 手机号' / 'name - 姓名'	text	1.3.4
bold	是否粗体，默认 normal	boolean	-	false	1.3.4
format	是否脱敏	boolean	当 mode 为 phone 和 name 时生效	false	1.3.4
color	文字颜色	string	-	-	1.3.4
lines	文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为 5。	Number	-	-	1.3.4
lineHeight	文本行高	string	-		1.3.4

Events

事件名称	说明	参数	最低版本
click	标签点击时触发	event	1.3.4

Slots

外部样式类

类名	说明	最低版本
custom-class	根节点样式	1.3.4
custom-style	根节点样式	1.3.4