Text 文本 V1.6.0+

概述

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

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

引入

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

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

import fuiText from "@/components/firstui/fui-text/fui-text.vue"
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)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！'
	}
}

不同样式类型

通过 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 属性设置字体颜色， block 属性设置是否为块状。

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

数据脱敏-姓名

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

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

Slots

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

Props

属性名	类型	说明	默认值	平台差异说明
type	String	样式类型，可选值：primary，success， warning，danger，purple，gray，black	black	-
text	String	文本内容	-	-
size	Number, String	字体大小	32	-
unit	String	字体大小单位，可选值：rpx、px	rpx	-
color	String	字体颜色，设置值则type失效	-	-
fontWeight	String	字重	400	-
align	String	文本对齐方式，可选值：left、center、right	left	-
decoration	String	文本的修饰，可选值：none、 underline、line-through	none	-
lineHeight V1.7.0+	Boolean	是否将行高设置与字体大小一致	false	-
padding	Array	文本padding值，[上,右,下,左]	['0', '0']	-
block	Boolean	是否为块状	false	-
textType	String	文本类型，可选值：text、mobile、amount、name	text	-
format	Boolean	文本是否脱敏格式化，仅textType取值mobile、amount时有效	false	-
call	Boolean	点击时是否拨打电话，仅textType取值mobile时有效	false	-
selectable	Boolean	文本是否可选	false	App（nvue不支持）、H5、快手小程序有效
userSelect	Boolean	文本是否可选	false	仅微信小程序有效
decode	Boolean	是否解码	false	App、H5、微信小程序有效
highlight	Boolean	是否有点击效果	false	-
disable	Boolean	是否禁用点击	false	-
unShrink V1.9.5+	Boolean	flex布局下是否取消收缩，不被挤压	false	-
param	Number, String	自定义参数，点击事件中回传	-	-

Events

事件名	说明	回调参数
@click	点击文本时触发	{   text:文本内容   param:自定义参数 }

示例预览

示例代码地址

Text 文本