Text 文本

该组件集成了文本类在开发中的常见功能，包含：状态、拨打电话、格式化日期、脱敏、超链接等功能；大可不必在使用文本时自己定义，fu-text组件几乎涵盖了在开发中能使用的大多数场景。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

通过 slot 传入文字内容

• 通过 slot、text 属性设置文本内容，推荐您使用 :text='value' 的形式

<fu-text>凭一腔孤勇，赴这十年之约</fu-text>

文字内容通过 text 传入

<fu-text text="凭一腔孤勇，赴这十年之约"></fu-text>

设置文本主题

通过 type 设置文本的主题，可选值 primary、success、warning、info、error

<fu-text text="主色" type="primary"></fu-text>
<fu-text text="成功" type="success"></fu-text>
<fu-text text="错误" type="error"></fu-text>
<fu-text text="警告" type="warning"></fu-text>
<fu-text text="信息" type="info"></fu-text>

拨打电话

通过将 mode 属性设置为 phone 即可调用拨打电话，提供加密值 encrypt

• 除此之外还有格式化日期、姓名脱敏、超链接、千分位金额等属性，具体可参考文档API

<fu-text text="15037843952" mode="phone"></fu-text>

日期格式化

通过将 mode 属性设置为 date 即可调用格式化日期，提供日期格式 format

<fu-text text="1706675070" mode="date" format="Y-M-D h:m:s"></fu-text>

姓名脱敏

<fu-text text="张小二" mode="name" format="encrypt"></fu-text>

超链接

<fu-text text="Go to fu docs" mode="link" href="http://www.baidu.com"></fu-text>

显示金额

<fu-text text="252525.25" mode="price"></fu-text>

前后图标

<fu-text text="百度一下" prefixIcon="service" iconStyle="font-size: 19px"></fu-text>
<fu-text text="查看更多" suffixIcon="right" iconStyle="font-size: 18px"></fu-text>

超出隐藏

<fu-text text="'FusionsUi，全端适配'的uni-app专属组件库，深度融合Vue2/Vue3双版本支持，提供企业级开发体验。" :lines="1"></fu-text>

小程序开放能力

<template>
    <fu-text text="分享到微信" openType="share" type="success" @click="onClick"></fu-text>
</template>
<script setup>
    const onClick = () => {
        // #ifndef MP-WEIXIN
        uni.$fu.toast('请在微信小程序内查看效果')
        // #endif
    };
</script>

API

Text Props

属性名	说明	类型	默认值	可选值
type	主题颜色	String	-	-
show	是否显示	Boolean	true	false
text	显示的值	String｜Number	-	-
prefixIcon	前置图标	String	-	-
suffixIcon	后置图标	String	-	-
iconColor	图标颜色	String	-	-
iconSize	图标大小	String	15	-
mode	文本处理的匹配模式： text 普通文本， price 价格， phone 手机号， name 姓名， date 日期， link 超链接	String	-	text/price/ phone/name/ date/link
href	mode=link 下，配置的链接	String	-	-
format	格式化模式： encrypt 加密， hide 隐藏， phone 手机号， date 日期	String｜Function	-	-
call	mode=phone时，点击文本是否拨打电话	Boolean	false	true
openType	小程序的打开方式	String	-	-
bold	是否加粗	Boolean	false	true
block	是否块状	Boolean	false	true
lines	超出隐藏的行数	String｜Number	-	-
color	文本颜色	String	-	-
size	文本大小	String｜Number	15	-
decoration	文本装饰	String	-	underline/ line-through/ none
margin	外边距	String	-	-
lineHeight	文本行高	String	-	-
align	文本对齐方式	String	-	left/center/right
wordWrap	文字换行，可选值： break-word: 在长单词或URL地址内部进行换行 normal: 只在允许的断字点换行（浏览器保持默认处理） anywhere: 为防止溢出，如果行中没有其他可接受的断点，则不可断的字符串（如长词或 URL）可能会在任何时候换行。	String	normal	-
customClass	定义需要用到的外部类	String	-	-
customStyle	定义需要用到的外部样式	Object｜String	-	-

Text Events

事件名	说明	回调参数
click	点击触发事件	() => void

Text Slots

插槽名	说明
default	文本内容