uView Pro X

简体中文

English

简体中文

English

主题

Text 文本 ​

17:06

说明 ​

把常用文本处理收敛到一个组件内：主题色、加粗、块状、多行省略，以及价格、手机号、姓名、日期、超链接等 mode 格式化。mode="phone" 配合 call 可点击拨号，mode="link" 渲染为可点击链接；open-type 开放能力仅微信小程序生效。

兼容性 ​

平台支持情况
App⚠️ 部分支持（不支持 open-type 开放能力；decoration 仅支持 underline / line-through）
H5⚠️ 部分支持（不支持 open-type 开放能力）
微信小程序✅ 支持

示例 ​

基础用法 ​

text 传入文本，默认按普通文本渲染。

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

主题色 type ​

type 切换主题色：primary / success / error / warning。

查看源码
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>

自定义颜色 color / 字号 size ​

color 与 size 覆盖文字颜色与字号（size 为数值时单位 px）。

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

粗体 bold / 块状 block ​

bold 加粗，block 让文本独占一行。

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

行数省略 lines ​

lines 限制显示行数，超出部分以省略号显示（示例为 1 行 / 2 行）。

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

价格模式 mode="price" ​

mode="price" 对数字做价格格式化（千分位、保留两位小数）。

查看源码
vue
<template>
    <ux-text mode="price" text="12345.678" type="error"></ux-text>
</template>

手机号模式 mode="phone" ​

第一行 format="encrypt" 星号加密，第二行 call 点击直接拨打

查看源码
vue
<template>
    <ux-text mode="phone" format="encrypt" text="13812345678"></ux-text>
    <ux-text mode="phone" call text="13812345678"></ux-text>
</template>

姓名加密 ​

mode="name" 配合 format="encrypt" 对姓名做星号加密。

查看源码
vue
<template>
    <ux-text mode="name" format="encrypt" text="张三丰"></ux-text>
    <ux-text mode="name" format="encrypt" text="欧阳娜娜"></ux-text>
</template>

日期格式化 mode="date" ​

mode="date" 格式化时间戳，format 自定义格式（不传时默认 yyyy-mm-dd）。

查看源码
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>

mode="link" 渲染为可点击链接，href 指定跳转地址。

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

图标 prefix-icon / suffix-icon ​

prefix-icon / suffix-icon 在文本前后添加图标。

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

文字装饰 decoration ​

underline 下划线 / line-through 删除线

查看源码
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 均支持数字，自动加单位

查看源码
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>

对齐与换行 align / word-wrap ​

block + align=center 水平居中，word-wrap=break-word 长文本断行

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

样式对象 icon-style / text-style ​

iconStyle 控制图标字号，textStyle 控制文字样式

查看源码
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-type（仅微信小程序） ​

open-type 文本在微信小程序下渲染为原生 button，可触发开放能力回调

查看源码
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 ​

属性说明类型默认值版本
customStyle自定义根节点样式string | UTSJSONObject--
customClass自定义根节点样式类string''-
type主题颜色string''-
show是否显示文本booleantrue-
text显示的值string | number''-
prefixIcon前置图标string''-
suffixIcon后置图标string''-
mode文本处理模式string'text'-
href链接地址string''-
format格式化规则string''-
call是否拨打电话booleanfalse-
openType小程序打开方式string''-
lang返回用户信息的语言，zh_CN / zh_TW / en，只微信小程序有效string''-
sessionFrom会话来源，open-type=contact 时有效，只微信小程序有效string''-
sendMessageTitle会话内消息卡片标题，open-type=contact 时有效string''-
sendMessagePath会话内消息卡片跳转路径，open-type=contact 时有效string''-
sendMessageImg会话内消息卡片图片，open-type=contact 时有效string''-
showMessageCard是否显示会话内消息卡片，open-type=contact 时有效booleanfalse-
appParameter打开 APP 时向 APP 传递的参数，open-type=launchApp 时有效string''-
formType用于 form 组件，点击分别触发 form 的 submit/reset 事件string''-
bold是否粗体booleanfalse-
block是否块状booleanfalse-
lines显示行数，超出省略号string | number''-
color文本颜色string''-
size字体大小（默认值与 const/let 段 DEFAULT_SIZE 保持一致）string | number14-
iconStyle图标样式UTSJSONObject | string--
textStyle文字样式UTSJSONObject | string--
decoration文字装饰string'none'-
margin外边距UTSJSONObject | string | number0-
lineHeight行高string | number''-
align对齐方式string'left'-
wordWrap换行方式string'normal'-

Events ​

事件名说明回调参数版本
click点击触发事件event: UniEvent-
getuserinfo获取用户信息回调，open-type=getUserInfo 时有效event: UniEvent-
contact客服消息回调，open-type=contact 时有效event: UniEvent-
getphonenumber获取手机号回调，open-type=getPhoneNumber 时有效event: UniEvent-
error开放能力发生错误时回调event: UniEvent-
launchapp打开 APP 成功回调，open-type=launchApp 时有效event: UniEvent-
opensetting打开授权设置页并关闭后回调，open-type=openSetting 时有效event: UniEvent-

Slots ​

插槽名说明版本
default自定义文本内容（默认显示 text；price / link / open-type 模式下同样替换默认文本）-

注意事项 ​

  1. mode 与 format 配合：phone + format="encrypt" 输出 138****5678 星号加密；name + format="encrypt" 姓名加密；date 不传 format 时默认 yyyy-mm-dd。
  2. mode="phone" 时只有 call=true 才会在点击时调起 uni.makePhoneCall，否则仅派发 click。
  3. decoration 在 App 端仅支持 underline / line-through（内部走 text-decoration-line），其他值无效；H5 / 微信小程序用 text-decoration。
  4. 多行省略用 lines 传行数，组件会自动追加块状与省略样式；App 走原生 max-lines 省略，H5 / 微信小程序走 -webkit-line-clamp。
  5. open-type 仅微信小程序生效，此时文本整体渲染为原生 button；App / H5 忽略该属性，仍按普通文本渲染。
  6. type 非空时忽略 color（type 优先）；size 走三级优先链：props > 全局 config（componentProps.ux-text.size）> 内建默认 14。
  7. price 模式仅对纯数字（含小数）做千分位格式化，非数字原样返回。
Copyright © 2026 uView Pro X | 鲁ICP备2021040594号-5