Skip to content

Text

此组件集成了文本类在项目中的常用功能,包括状态,拨打电话,格式化日期,*替换,超链接...等功能。 您大可不必在使用特殊文本时自己定义,text组件几乎涵盖您能使用的大部分场景。

平台兼容性

App(vue)App(nvue)H5小程序VUE2VUE3

基本使用

通过 text 参数设置文本内容。推荐您使用 :text='value' 的形式

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

设置主题

  • 通过 type 参数设置文本主题,我们提供了五类属性。
  • primary error success warning info
vue
<wu-text type="primary" text="主色"></wu-text>
<wu-text type="error"   text="错误"></wu-text>
<wu-text type="success" text="成功"></wu-text>
<wu-text type="warning" text="警告"></wu-text>
<wu-text type="info"    text="信息"></wu-text>
<wu-text type="primary" text="主色"></wu-text>
<wu-text type="error"   text="错误"></wu-text>
<wu-text type="success" text="成功"></wu-text>
<wu-text type="warning" text="警告"></wu-text>
<wu-text type="info"    text="信息"></wu-text>

拨打电话

  • 通过将 mode 属性设置为 phone 即可调用拨打电话,提供加密值 encrypt
  • 除此之外还有格式化日期,姓名脱敏,超链接,千分位金额等属性,将在以下实例中展示
vue
<wu-text mode="phone" text="17363987953"></wu-text>
<wu-text mode="phone" text="17363987953"></wu-text>

日期格式化

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

姓名脱敏

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

超链接

添加 href 指定链接地址

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>

显示金额

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

超出隐藏

内置了文字超出隐藏样式,设置 lines 属性表明几行后隐藏

vue
<wu-text  :lines="2" text="关于wu-ui的取名来由,来自于一个玩笑,我曾经和几个很要好的朋友说,我们成立一个组织,叫卧龙凤雏吧,首字母 w 来自于卧的首字母,u则来自于 uniapp,故取名wu-ui,表达源于uni-app和uView,在此也对它们表示感谢。"></wu-text>
<wu-text  :lines="2" text="关于wu-ui的取名来由,来自于一个玩笑,我曾经和几个很要好的朋友说,我们成立一个组织,叫卧龙凤雏吧,首字母 w 来自于卧的首字母,u则来自于 uniapp,故取名wu-ui,表达源于uni-app和uView,在此也对它们表示感谢。"></wu-text>

小程序开放能力

针对小程序开放能力,我们提供了分享,请在小程序环境下使用

vue
<wu-text text="分享到微信" openType="share" type="success" @click="clickHandler"></wu-text>
<script>
	export default {
		onLoad() {},
		methods: {
			clickHandler() {
				// #ifndef MP-WEIXIN
				this.$w.toast('请在微信小程序内查看效果')
				// #endif
			}
		},
	}
</script>
<wu-text text="分享到微信" openType="share" type="success" @click="clickHandler"></wu-text>
<script>
	export default {
		onLoad() {},
		methods: {
			clickHandler() {
				// #ifndef MP-WEIXIN
				this.$w.toast('请在微信小程序内查看效果')
				// #endif
			}
		},
	}
</script>

API

Text Props

属性名说明类型默认值可选值
type主题颜色String--
show是否显示Booleantruetrue / false
text显示的值String / Number--
prefixIcon前置图标String--
suffixIcon后置图标String--
mode文本处理的匹配模式,text-普通文本,price-价格,phone-手机号,name-姓名,date-日期,link-超链接String--
hrefmode=link下,配置的链接String--
format格式化规则String / Function--
callmode=phone时,点击文本是否拨打电话Booleanfalsetrue / false
openType小程序的打开方式String--
bold是否粗体,默认normalBooleanfalsetrue / false
block是否块状Booleanfalsetrue / false
lines文本显示的行数,如果设置,超出此行数,将会显示省略号String / Number--
color文本颜色String--
size字体大小String / Number15-
iconStyle图标的样式Object / String15px-
decoration文字装饰,下划线,中划线等Stringnoneunderline / line-through
margin外边距,对象、字符串,数值形式均可Object / Number / String--
lineHeight文本行高Number / String--
align文本对齐方式Stringleftleft / center/ right
wordWrap文字换行Stringnormalbreak-word / anywhere

Text Events

属性名说明回调参数
click点击触发事件-