Text 文本

概述

Text 文本，用于包裹文本内容。

支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiText from "@/components/firstui/fui-text/fui-text.uvue"
export default {
	components:{
		fuiText
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 text 属性设置文本内容，size 属性设置字体大小。

<fui-text :text="text" :size="28"></fui-text>

data() {
	return {
		text: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、uni-app x、微信小程序 等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！'
	}
}

不同样式类型

通过 text 属性设置文本内容， type 属性设置样式类型。

<fui-text text="primary" type="primary"></fui-text>
<fui-text text="success" type="success"></fui-text>
<fui-text text="warning" type="warning"></fui-text>
<fui-text text="danger" type="danger"></fui-text>

自定义颜色

通过 text 属性设置文本内容， color 属性设置字体颜色。

<fui-text text="block" color="brown"></fui-text>

数据脱敏-姓名

通过 text 属性设置文本内容， text-type 属性设置文本类型， format 属性设置文本是否脱敏格式化。

<fui-text text="王小仙" text-type="name" :format="true"></fui-text>

Slots

插槽名称	说明
default	文本左侧自定义内容
right	文本右侧自定义内容

Props

属性名	类型	说明	默认值	平台差异说明
type	String	样式类型，可选值：primary，success， warning，danger，purple，gray，black	black	-
text	String	文本内容	-	-
size	Number	字体大小	32	-
unit	String	字体大小单位，可选值：rpx、px	rpx	-
color	String	字体颜色，设置值则type失效	-	-
fontWeight	String	字重，仅支持normal、bold、‘400‘，’700‘	normal	-
align	String	文本对齐方式，可选值：left、center、right	left	-
decoration	String	文本的修饰，可选值：none、 underline、line-through	none	-
lineHeight	Boolean	是否将行高设置与字体大小一致	false	-
padding	String	文本padding值，同css	'0'	-
textType	String	文本类型，可选值：text、mobile、amount、name	text	-
format	Boolean	文本是否脱敏格式化，仅textType取值mobile、amount时有效	false	-
call	Boolean	点击时是否拨打电话，仅textType取值mobile时有效	false	-
selectable	Boolean	文本是否可选	false	-
highlight	Boolean	是否有点击效果	false	-
disable	Boolean	是否禁用点击	false	-
unShrink	Boolean	flex布局下是否取消收缩，不被挤压	false	-
param	String	自定义参数，点击事件中回传	-	-

Events

事件名	类型	说明	回调参数
@onclick	(event: FuiTextClickParam) => void	点击文本时触发	FuiTextClickParam

FuiTextClickParam

/**
* fui-text 文本组件 @onclick 事件 回调参数类型
* @description this.$emit('onclick',FuiTextClickParam)
* @param {string} text {string} text文本
* @param {string} param {string} 自定义参数 
*/
export type FuiTextClickParam = {
	text : string;
	param : string;
}

/*页面引入*/
import { FuiTextClickParam } from '@/components/firstui/fui-types/index.uts'

示例预览

示例代码地址

Text 文本