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
unShrink V2.8.0+	Boolean	flex布局中是否取消收缩，内容不被挤压换行	false
disable	Boolean	是否禁用点击事件	false

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

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

预览

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

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

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