Text

17:06

Description

Folds common text handling into one component: theme color, bold, block layout, multi-line ellipsis, and mode formatting for price, phone, name, date, and links. mode="phone" with call dials on tap, mode="link" renders a clickable link, and the open-type capability only takes effect on WeChat Mini Program.

Compatibility

Platform	Support
App	⚠️ Partial (`open-type` capability not supported; `decoration` supports only `underline` / `line-through`)
H5	⚠️ Partial (`open-type` capability not supported)
WeChat Mini Program	✅ Supported

Examples

Basic Usage

Pass text to text; it renders as plain text by default.

View source

vue

<template>
    <ux-text text="我用十年青春，赴你最后之约"></ux-text>
</template>

Theme Color (type)

type switches the theme color: primary / success / error / warning.

View source

vue

<template>
    <ux-text type="primary" text="这是一段主题色文本"></ux-text>
    <ux-text type="success" text="这是一段成功色文本"></ux-text>
    <ux-text type="error" text="这是一段错误色文本"></ux-text>
    <ux-text type="warning" text="这是一段警告色文本"></ux-text>
</template>

Custom Color (color) / Font Size (size)

color and size override the text color and font size (size is in px when numeric).

View source

vue

<template>
    <ux-text color="#2979ff" size="20" text="自定义颜色与字号"></ux-text>
</template>

Bold (bold) / Block (block)

bold makes the text bold; block makes it take a full row.

View source

vue

<template>
    <ux-text bold text="这是一段加粗文本"></ux-text>
    <ux-text block text="这是一段块状文本，独占一行展示"></ux-text>
</template>

Line Clamping (lines)

lines limits the number of lines shown; overflow is ellipsized (1 line / 2 lines here).

View source

vue

<template>
    <ux-text lines="1" text="这是一段超长的文本内容，用于演示单行省略的效果，超出部分将以省略号显示"></ux-text>
    <ux-text lines="2" text="这是一段超长的文本内容，用于演示两行省略的效果，超出两行的部分将以省略号显示"></ux-text>
</template>

Price Mode (mode="price")

mode="price" formats a number as a price (thousands separators, two decimals).

View source

vue

<template>
    <ux-text mode="price" text="12345.678" type="error"></ux-text>
</template>

Phone Mode (mode="phone")

First line masks the number with format="encrypt"; second line calls directly via call

View source

vue

<template>
    <ux-text mode="phone" format="encrypt" text="13812345678"></ux-text>
    <ux-text mode="phone" call text="13812345678"></ux-text>
</template>

Name Masking

mode="name" with format="encrypt" masks the name with asterisks.

View source

vue

<template>
    <ux-text mode="name" format="encrypt" text="张三丰"></ux-text>
    <ux-text mode="name" format="encrypt" text="欧阳娜娜"></ux-text>
</template>

Date Formatting (mode="date")

mode="date" formats a timestamp; format customizes the pattern (defaults to yyyy-mm-dd).

View source

vue

<template>
    <ux-text mode="date" :text="dateValue"></ux-text>
    <ux-text mode="date" format="yyyy-mm-dd hh:MM:ss" :text="dateValue"></ux-text>
</template>

<script setup lang="uts">
// 时间戳示例（2026-08-05 12:00:00）
const dateValue: number = 1783245600000;
</script>

Hyperlink Mode (mode="link")

mode="link" renders a clickable link; href sets the target URL.

View source

vue

<template>
    <ux-text mode="link" href="https://uviewpro.cn" text="uView Pro 官网"></ux-text>
</template>

Icons (prefix-icon / suffix-icon)

prefix-icon / suffix-icon add an icon before or after the text.

View source

vue

<template>
    <ux-text prefix-icon="home" text="前置图标文本"></ux-text>
    <ux-text suffix-icon="arrow-right" text="后置图标文本"></ux-text>
</template>

Text Decoration (decoration)

underline / line-through

View source

vue

<template>
    <ux-text decoration="underline" color="#2979ff" text="这是一段带下划线的文本"></ux-text>
    <ux-text decoration="line-through" color="#fa3534" text="这是一段带删除线的文本"></ux-text>
</template>

Margin & Line Height (margin / line-height)

margin and line-height accept numbers and auto-append units

View source

vue

<template>
    <ux-text :margin="20" :line-height="30" text="这是一段设置外边距与行高的文本"></ux-text>
    <ux-text :margin="20" :line-height="40" color="#2979ff" text="这是一段设置外边距与行高的文本"></ux-text>
</template>

Alignment & Word Wrap (align / word-wrap)

block + align=center centers horizontally; word-wrap=break-word wraps long text

View source

vue

<template>
    <ux-text block align="center" word-wrap="break-word" text="这是一段很长的文本，用于演示 word-wrap=break-word 在超出容器宽度时的断行效果。"></ux-text>
</template>

Style Objects (icon-style / text-style)

iconStyle controls the icon font size, textStyle controls the text style

View source

vue

<template>
    <ux-text
        prefix-icon="home"
        :icon-style="iconCustomStyle"
        :text-style="textCustomStyle"
        text="自定义图标与文字样式"
    ></ux-text>
</template>

<script setup lang="uts">
const iconCustomStyle: UTSJSONObject = { 'font-size': '16px' };
const textCustomStyle: UTSJSONObject = { 'font-style': 'italic' };
</script>

Open Capabilities (open-type, WeChat MP only)

With open-type the text renders as a native button on WeChat Mini Program and triggers capability callbacks

View source

vue

<!-- #ifdef MP-WEIXIN -->
<template>
    <view class="open-type-list">
        <ux-text
            open-type="getUserInfo"
            lang="zh_CN"
            margin="0 0 16px"
            text="获取用户信息"
            @getuserinfo="onGetUserInfo"
        ></ux-text>
        <ux-text
            open-type="contact"
            session-from="ux-text-demo"
            send-message-title="text-demo"
            margin="0 0 16px"
            text="联系客服"
            @contact="onContact"
        ></ux-text>
        <ux-text
            open-type="getPhoneNumber"
            text="获取手机号"
            @getphonenumber="onGetPhoneNumber"
        ></ux-text>
    </view>
    <demo-result v-if="openTypeResult !== ''" :text="'回调结果: ' + openTypeResult" />
</template>

<style lang="scss">
.open-type-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}
</style>

<script setup lang="uts">
const openTypeResult = ref<string>('');

function updateOpenTypeResult(event: UniEvent) {
    const detail = (event as unknown as UTSJSONObject)['detail'];
    openTypeResult.value = detail == null ? '{}' : JSON.stringify(detail);
}

function onGetUserInfo(event: UniEvent) {
    updateOpenTypeResult(event);
    console.log('ux-text getUserInfo', (event as unknown as UTSJSONObject)['detail']);
}

function onContact(event: UniEvent) {
    updateOpenTypeResult(event);
    console.log('ux-text contact', (event as unknown as UTSJSONObject)['detail']);
}

function onGetPhoneNumber(event: UniEvent) {
    updateOpenTypeResult(event);
    console.log('ux-text getPhoneNumber', (event as unknown as UTSJSONObject)['detail']);
}
</script>
<!-- #endif -->

API

Props

Property	Description	Type	Default	Version
`customStyle`	Custom root element style	`string \| UTSJSONObject`	`-`	-
`customClass`	Custom root element style class	`string`	`''`	-
`type`	Theme color	`string`	`''`	-
`show`	Whether to show the text	`boolean`	`true`	-
`text`	Value to display	`string \| number`	`''`	-
`prefixIcon`	Prefix icon	`string`	`''`	-
`suffixIcon`	Suffix icon	`string`	`''`	-
`mode`	Text handling mode: text / price / phone / name / date / link	`string`	`'text'`	-
`href`	Link URL (for `mode=link`)	`string`	`''`	-
`format`	Formatting rule	`string`	`''`	-
`call`	Whether to dial the number (for `mode=phone`)	`boolean`	`false`	-
`openType`	Mini Program open capability	`string`	`''`	-
`lang`	Language for returned user info: zh_CN / zh_TW / en (WeChat Mini Program only)	`string`	`''`	-
`sessionFrom`	Session source; effective when `open-type=contact` (WeChat Mini Program only)	`string`	`''`	-
`sendMessageTitle`	In-session message card title; effective when `open-type=contact`	`string`	`''`	-
`sendMessagePath`	In-session message card jump path; effective when `open-type=contact`	`string`	`''`	-
`sendMessageImg`	In-session message card image; effective when `open-type=contact`	`string`	`''`	-
`showMessageCard`	Whether to show the in-session message card; effective when `open-type=contact`	`boolean`	`false`	-
`appParameter`	Params passed to the App when `open-type=launchApp`	`string`	`''`	-
`formType`	Used inside a form; click triggers the form's submit / reset	`string`	`''`	-
`bold`	Whether bold	`boolean`	`false`	-
`block`	Whether block-level	`boolean`	`false`	-
`lines`	Number of lines to show; overflow is ellipsized	`string \| number`	`''`	-
`color`	Text color	`string`	`''`	-
`size`	Font size (the default matches `DEFAULT_SIZE` in the const/let section)	`string \| number`	`14`	-
`iconStyle`	Icon style	`UTSJSONObject \| string`	`-`	-
`textStyle`	Text style	`UTSJSONObject \| string`	`-`	-
`decoration`	Text decoration	`string`	`'none'`	-
`margin`	Outer margin	`UTSJSONObject \| string \| number`	`0`	-
`lineHeight`	Line height	`string \| number`	`''`	-
`align`	Text alignment	`string`	`'left'`	-
`wordWrap`	Word wrap mode	`string`	`'normal'`	-

Events

Event	Description	Params	Version
`click`	Fires on click	`event: UniEvent`	-
`getuserinfo`	User-info callback; effective when `open-type=getUserInfo`	`event: UniEvent`	-
`contact`	Customer-service message callback; effective when `open-type=contact`	`event: UniEvent`	-
`getphonenumber`	Phone-number callback; effective when `open-type=getPhoneNumber`	`event: UniEvent`	-
`error`	Called when an open capability errors	`event: UniEvent`	-
`launchapp`	Called when the App opens successfully; effective when `open-type=launchApp`	`event: UniEvent`	-
`opensetting`	Called after the authorization settings page is closed; effective when `open-type=openSetting`	`event: UniEvent`	-

Slots

Slot	Description	Version
`default`	Custom text content (defaults to `text`; also replaces the default text in `price` / `link` / `open-type` modes)	-

Notes

mode works with format: phone + format="encrypt" outputs 138****5678; name + format="encrypt" masks the name; date defaults to yyyy-mm-dd when format is omitted.
With mode="phone", only call=true triggers uni.makePhoneCall on tap; otherwise only click is emitted.
On App, decoration supports only underline / line-through (handled internally via text-decoration-line); other values have no effect. H5 / WeChat Mini Program use text-decoration.
Use lines to clamp lines; the component adds the block and ellipsis styles automatically. App uses native max-lines, H5 / WeChat Mini Program use -webkit-line-clamp.
open-type only takes effect on WeChat Mini Program, where the whole text renders as a native button; App / H5 ignore the prop and render plain text.
When type is non-empty, color is ignored (type wins); size follows a three-level priority chain: props > global config (componentProps.ux-text.size) > built-in default 14.
price mode only formats pure numbers (including decimals); non-numeric values are returned as-is.

Text ​

Description ​

Compatibility ​

Examples ​

Basic Usage ​

Theme Color (type) ​

Custom Color (color) / Font Size (size) ​

Bold (bold) / Block (block) ​

Line Clamping (lines) ​

Price Mode (mode="price") ​

Phone Mode (mode="phone") ​

Name Masking ​

Date Formatting (mode="date") ​

Hyperlink Mode (mode="link") ​

Icons (prefix-icon / suffix-icon) ​

Text Decoration (decoration) ​

Margin & Line Height (margin / line-height) ​

Alignment & Word Wrap (align / word-wrap) ​

Style Objects (icon-style / text-style) ​

Open Capabilities (open-type, WeChat MP only) ​

API ​

Props ​

Events ​

Slots ​

Notes ​

Text

Description

Compatibility

Examples

Basic Usage

Theme Color (type)

Custom Color (color) / Font Size (size)

Bold (bold) / Block (block)

Line Clamping (lines)

Price Mode (mode="price")

Phone Mode (mode="phone")

Name Masking

Date Formatting (mode="date")

Hyperlink Mode (mode="link")

Icons (prefix-icon / suffix-icon)

Text Decoration (decoration)

Margin & Line Height (margin / line-height)

Alignment & Word Wrap (align / word-wrap)

Style Objects (icon-style / text-style)

Open Capabilities (open-type, WeChat MP only)

API

Props

Events

Slots

Notes