Skip to content

Text 文本

1.3.4 版本提供

基本用法

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

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

设置主题

通过type参数设置文本主题,我们提供了五类属性:primary error success warning default-默认

html
<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 属性。

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

是否粗体

设置 bold 属性。

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

字体大小

设置 size 属性。

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

脱敏

设置 format 属性,当 modephone``name时生效。

html
<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>

lines

设置 lines 属性,文本显示的行数,如果设置,超出此行数,将会显示省略号。最大值为5。

html
<wd-text :text="text" :lines="2" size="16px"></wd-text>

lineHeight

设置 lineHeight 文本行高。

html
<wd-text :text="text" lineHeight="20px"></wd-text>

前后插槽

设置 prefix suffix 插槽。

html
<wd-text
  text="12345678901"
  mode="phone"
  format
  type="primary"
  prefix="Prefix"
  suffix="Suffix"
/>

<wd-text text="12345678901" mode="phone" format type="primary">
  <template #prefix>
    <text>Prefix</text>
  </template>
  <template #suffix>Suffix</template>
</wd-text>

金额

设置 mode="price"

html
<wd-text
  text="16354.156"
  mode="price"
  type="success"
  decoration="line-through"
  prefix="¥"
/>

文字装饰

设置 decoration 文字装饰,下划线,中划线等。

html
<wd-text :text="text" type="warning" decoration="underline"/>

事件

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

Attributes

参数说明类型可选值默认值最低版本
type主题类型string'primary' / 'error' / 'warning' / 'success'default1.3.4
text文字string / number-1.3.4
size字体大小string--1.3.4
mode文本处理的匹配模式string'text-普通文本' / 'date - 日期' / 'phone - 手机号' / 'name - 姓名' / 'price - 金额'text1.3.4+
bold是否粗体,默认 normalboolean-false1.3.4
format是否脱敏boolean当 mode 为 phone 和 name 时生效false1.3.4
color文字颜色string--1.3.4
lines文本显示的行数,如果设置,超出此行数,将会显示省略号。最大值为 5。Number--1.3.4
lineHeight文本行高string-1.3.4
decoration文字装饰,下划线,中划线等stringunderline/line-through/overline1.3.4+
prefix前置插槽string-1.3.4+
suffix后置插槽string-1.3.4+

Events

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

Slots

外部样式类

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

Released under the MIT License.

Released under the MIT License.