Text

Text component, used to display text information.

Available since version 1.3.4

Basic Usage

Set text to set the text content. It is recommended to use the form :text='value'.

<wd-text
  text="Reed leaves fill the sandbar, cold sand carries shallow streams. Twenty years later, passing the south tower again. The boat tied under willows is not yet steady, how many days until mid-autumn comes again? Yellow crane at the broken cliff, has my old friend been here? The old rivers and mountains are all filled with new sorrows. Wanting to buy osmanthus flowers and bring wine, but it's never like the wanderings of youth."
></wd-text>

Set Theme

Set text theme through the type parameter. We provide five types: primary error success warning default.

<wd-text type="primary" text="Primary"></wd-text>
<wd-text type="error" text="Error"></wd-text>
<wd-text type="success" text="Success"></wd-text>
<wd-text type="warning" text="Warning"></wd-text>
<wd-text text="Default"></wd-text>

Custom Font Color

Set the color property.

<wd-text
  text="Reed leaves fill the sandbar, cold sand carries shallow streams. Twenty years later, passing the south tower again. The boat tied under willows is not yet steady, how many days until mid-autumn comes again? Yellow crane at the broken cliff, has my old friend been here? The old rivers and mountains are all filled with new sorrows. Wanting to buy osmanthus flowers and bring wine, but it's never like the wanderings of youth."
  color="#36B8C2"
></wd-text>

Bold Text

Set the bold property.

<wd-text
  text="Reed leaves fill the sandbar, cold sand carries shallow streams. Twenty years later, passing the south tower again. The boat tied under willows is not yet steady, how many days until mid-autumn comes again? Yellow crane at the broken cliff, has my old friend been here? The old rivers and mountains are all filled with new sorrows. Wanting to buy osmanthus flowers and bring wine, but it's never like the wanderings of youth."
  bold
></wd-text>

Font Size

Set the size property.

<wd-text
  text="Reed leaves fill the sandbar, cold sand carries shallow streams. Twenty years later, passing the south tower again. The boat tied under willows is not yet steady, how many days until mid-autumn comes again? Yellow crane at the broken cliff, has my old friend been here? The old rivers and mountains are all filled with new sorrows. Wanting to buy osmanthus flowers and bring wine, but it's never like the wanderings of youth."
  size="16px"
></wd-text>

Data Masking

Set the format property, effective when mode is phone or name.

<wd-text text="Li Si" mode="name" :format="true"></wd-text>
<wd-text text="Zhang Chang San" mode="name" :format="true"></wd-text>
<wd-text text="18888888888" mode="phone" :format="true"></wd-text>

Lines

Set the lines property to specify the number of lines of text to display. If set, an ellipsis will be shown when the text exceeds this number of lines. Maximum value is 5.

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

Line Height

Set lineHeight for text line height.

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

Prefix and Suffix Slots

Set prefix and suffix slots.

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

Price

Set mode="price".

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

Text Decoration

Set decoration for text decoration, such as underline, line-through, etc.

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

Events

<wd-text
  text="Reed leaves fill the sandbar, cold sand carries shallow streams. Twenty years later, passing the south tower again. The boat tied under willows is not yet steady, how many days until mid-autumn comes again? Yellow crane at the broken cliff, has my old friend been here? The old rivers and mountains are all filled with new sorrows. Wanting to buy osmanthus flowers and bring wine, but it's never like the wanderings of youth."
  @click="clickTest"
></wd-text>

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

Attributes

Parameter	Description	Type	Options	Default	Version
type	Theme type	string	'primary' / 'error' / 'warning' / 'success'	default	1.3.4
text	Text content	string / number	-		1.3.4
size	Font size	string	-	-	1.3.4
mode	Text processing mode	string	'text-normal text' / 'date' / 'phone' / 'name' / 'price'	text	1.3.4+
bold	Whether bold, default normal	boolean	-	false	1.3.4
format	Whether to mask data	boolean	Effective when mode is phone or name	false	1.3.4
color	Text color	string	-	-	1.3.4
lines	Number of lines to display, if set, ellipsis will show when exceeding. Max value is 5.	Number	-	-	1.3.4
lineHeight	Text line height	string	-		1.3.4
decoration	Text decoration, underline, line-through, etc.	string	underline/line-through/overline		1.3.4+
prefix	Prefix slot	string	-		1.3.4+
suffix	Suffix slot	string	-		1.3.4+

Events

Event Name	Description	Parameters	Version
click	Triggered when text is clicked	event	1.3.4

Slots

External Classes

Class Name	Description	Version
custom-class	Root node style	1.3.4
custom-style	Root node style	1.3.4

Source Code

Documentation

• Component