# Text 文本 V1.6.0+

概述

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

# 支持平台

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

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiText from "@/components/firstui/fui-text/fui-text.vue"
export default {
	components:{
		fuiText
	}
}
1
2
3
4
5
6
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

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

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

# 代码演示

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

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

<fui-text :text="text" :size="28"></fui-text>
1
data() {
	return {
		text: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案,包含业内顶尖的组件库、强大的功能库、丰富精美的模板库,提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本,兼顾高效率与高性能,让您的开发获得百倍提质提速!'
	}
}
1
2
3
4
5
不同样式类型

通过 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>
1
2
3
4
自定义颜色/块状

通过 text 属性设置文本内容, color 属性设置字体颜色, block 属性设置是否为块状。

<fui-text text="block" color="brown" block></fui-text>
1
数据脱敏-姓名

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

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

# 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、H5、快手小程序有效
userSelect Boolean 文本是否可选 false 仅微信小程序有效
decode Boolean 是否解码 false App、H5、微信小程序有效
highlight Boolean 是否有点击效果 false -
disable Boolean 是否禁用点击 false -
param Number, String 自定义参数,点击事件中回传 - -

# Events

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

示例预览

# 示例代码地址

FirstUIText 文本
Last Updated: 9/29/2022, 1:07:59 AM