# tui-text 文本 V2.0.0+

介绍

文本,页面中文本使用较多,使用组件可快速实现指定样式文本展示

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiText from "@/components/thorui/tui-text/tui-text.vue"
export default {
	components:{
		tuiText
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

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

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-text": "/components/thorui/tui-text/tui-text"
  }
}

# 代码演示

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

基础使用

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

<tui-text text="基础使用"></tui-text>
<tui-text text="基础使用" type="primary"></tui-text>
<tui-text text="基础使用" type="success"></tui-text>
<tui-text text="基础使用" type="danger"></tui-text>
<tui-text text="基础使用" type="warning"></tui-text>
<tui-text text="基础使用" type="gray"></tui-text>
设置样式

通过 padding 属性设置内边距,block 属性设置是否为块状,text 属性设置文本内容,color 属性设置文本自定义颜色,size 属性设置文本字体大小,fontWeight 属性设置字重。

<tui-text padding="24rpx 0" block text="块状,独占一行"></tui-text>
<tui-text block text="块状,自定义颜色" color="#007AFF"></tui-text>
<tui-text padding="24rpx 0" block text="设置字体大小,字重" size="36" fontWeight="600"></tui-text>	
<tui-text padding="0 0 24rpx" block text="设置字体大小,字重" size="48" fontWeight="600"></tui-text>

# Slots

名称 说明
default 文本左侧显示内容
right 文本右侧显示内容

# Props

参数 类型 说明 默认值
type String 样式类型,可选值:primary,success, warning,danger,gray,black,white black
text Number, String 文本内容 -
size Number, String 字体大小 32
unit String 字体大小单位,可选值rpx,px rpx
color String 字体颜色 -
fontWeight Number, String 字重 400
align String 文本对齐方式,可选值:left、center、right left
decoration String 文本的修饰,可选值:none、 underline、line-through none
lineHeight Boolean 文本行高是否设置和字体大小一致 false
padding String 文本内边距 0
block Boolean 文本是否为块状,独占一行 false
textType String 文本类型,可选值:text、mobile、amount text
format Boolean 文本是否格式化,仅textType取值mobile、amount时有效 false
call Boolean 点击文本是否拨打电话,仅textType取值mobile时有效 false
selectable Boolean 文本是否可选,App、H5、快手小程序有效 false
userSelect Boolean 文本是否可选,仅微信小程序有效 false
decode Boolean 是否解码,App、H5、微信小程序有效 false
highlight Boolean 是否有点击效果 false
disable Boolean 是否禁用点击事件 false

# Events

注意:小程序绑定事件使用:bind:click,uni-app使用@click。

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

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码