Text 文本

This component integrates the common functions of the text class in the project, including status, call number, deletion date, * replacement, hyperlink... and other functions. You don't have to define it yourself when using special text, the text component almost covers most of the scenarios you can use.

Platform compatibility

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

basic use

Set the text content via the text parameter. It is recommended that you use :text='value'

vue

<wu-text text="大鹏一日同风起，扶摇直上九万里"></wu-text>

<wu-text text="大鹏一日同风起，扶摇直上九万里"></wu-text>

set theme

Set the text theme through the type parameter, we provide five types of attributes.
primary error success warning info

vue

<wu-text type="primary" text="main color"></wu-text>
<wu-text type="error"   text="mistake"></wu-text>
<wu-text type="success" text="success"></wu-text>
<wu-text type="warning" text="warn"></wu-text>
<wu-text type="info"    text="info"></wu-text>

<wu-text type="primary" text="main color"></wu-text>
<wu-text type="error"   text="mistake"></wu-text>
<wu-text type="success" text="success"></wu-text>
<wu-text type="warning" text="warn"></wu-text>
<wu-text type="info"    text="info"></wu-text>

dial number

By setting the mode attribute to phone, the phone call can be called, providing the encrypted value encrypt
In addition, there are attributes such as formatted date, name desensitization, hyperlink, and thousand percent amount, which will be shown in the following examples

vue

<wu-text mode="phone" text="17363987953"></wu-text>

<wu-text mode="phone" text="17363987953"></wu-text>

date formatting

vue

<wu-text mode="date" text="1691825812"></wu-text>

<wu-text mode="date" text="1691825812"></wu-text>

name desensitization

vue

<wu-text mode="name" text="张三三" format="encrypt"></wu-text>

<wu-text mode="name" text="张三三" format="encrypt"></wu-text>

Hyperlink

Add href to specify the link address

vue

<wu-text mode="link" text="Go to uView docs" href="https://wuui.cn"></wu-text>

<wu-text mode="link" text="Go to uView docs" href="https://wuui.cn"></wu-text>

show amount

vue

<wu-text mode="price" text="1723231.77"></wu-text>

<wu-text mode="price" text="1723231.77"></wu-text>

beyond hidden

The built-in text exceeds the hidden style, set the lines property to indicate that it will be hidden after a few lines

vue

<wu-text  :lines="2" text="The origin of the name of wu-ui comes from a joke. I once told a few good friends that we should set up an organization called Wolongfengchu. The initial letter w comes from the initial letter of Wo, and u comes from Because of uniapp, it is named wu-ui, and the expression comes from uni-app and uView, and I would also like to express my gratitude to them."></wu-text>

<wu-text  :lines="2" text="The origin of the name of wu-ui comes from a joke. I once told a few good friends that we should set up an organization called Wolongfengchu. The initial letter w comes from the initial letter of Wo, and u comes from Because of uniapp, it is named wu-ui, and the expression comes from uni-app and uView, and I would also like to express my gratitude to them."></wu-text>

Small program open ability

For the opening capability of the Mini Program, we provide sharing, please use it in the Mini Program environment

vue

<wu-text text="Share to WeChat" openType="share" type="success" @click="clickHandler"></wu-text>
<script>
	export default {
		onLoad() {},
		methods: {
			clickHandler() {
				// #ifndef MP-WEIXIN
				this.$w.toast('Please check the effect in the WeChat applet')
				// #endif
			}
		},
	}
</script>

<wu-text text="Share to WeChat" openType="share" type="success" @click="clickHandler"></wu-text>
<script>
	export default {
		onLoad() {},
		methods: {
			clickHandler() {
				// #ifndef MP-WEIXIN
				this.$w.toast('Please check the effect in the WeChat applet')
				// #endif
			}
		},
	}
</script>

API

Text Props

Attribute Name	illustrate	types	Default value	Optional values
type	theme color	String	-	-
show	whether to display	Boolean	true	true / false
text	displayed value	String / Number	-	-
prefixIcon	prefix icon	String	-	-
suffixIcon	suffix icon	String	-	-
mode	Matching mode for text processing, text-normal text, price-price, phone-mobile phone number, name-name, date-date, link-hyperlink	String	-	-
href	mode=link, the configured link	String	-	-
format	formatting rules	String / Function	-	-
call	When mode=phone, click the text whether to call or not	Boolean	false	true / false
openType	The way to open the applet	String	-	-
bold	bold or not, default normal	Boolean	false	true / false
block	block or not	Boolean	false	true / false
lines	The number of lines displayed in the text, if set, an ellipsis will be displayed if it exceeds this number	String / Number	-	-
color	text color	String	-	-
size	font size	String / Number	15	-
iconStyle	Icon style	Object / String	15px	-
decoration	Text decoration, underline, middle line, etc.	String	none	underline / line-through
margin	Margin, object, string, numeric form can be	Object / Number / String	-	-
lineHeight	text line height	Number / String	-	-
align	text alignment	String	left	left / center / right
wordWrap	word wrap	String	normal	break-word / anywhere

Text Events

name	illustrate	Callback Arguments
click	click trigger event	-

Text 文本 ​

Platform compatibility ​

basic use ​

set theme ​

dial number ​

date formatting ​

name desensitization ​

Hyperlink ​

show amount ​

beyond hidden ​

Small program open ability ​

API ​

Text Props ​

Text Events ​