uniapp中uview的text组件

news2024/11/18 17:51:11

基本使用：

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

<u--text text="我用十年青春,赴你最后之约"></u--text>

设置主题：

通过type参数设置文本主题，我们提供了五类属性。
primary error success warning info

<u--text type="primary" text="主色"></u--text>
<u--text type="error"   text="错误"></u--text>
<u--text type="success" text="成功"></u--text>
<u--text type="warning" text="警告"></u--text>
<u--text type="info"    text="信息"></u--text>

拨打电话：

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

<u--text mode="phone" text="15019479320"></u--text>

日期格式化

<u--text mode="date" text="1612959739"></u--text>

#姓名脱敏

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

#超链接

添加href指定链接地址

<u--text mode="link" text="Go to uView docs" href="https://www.uviewui.com" ></u--text>

#显示金额

<u--text mode="price" text="728732.32"></u--text>

#前后图标

添加prefixIcon,suffixIcon指定图标和位置，iconStyle设置图标大小

#超出隐藏

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

<u--text :lines="2" text="关于uView的取名来由，首字母u来自于uni-app首字母，
uni-app是基Vuejs，Vue和View(延伸为UI、视图之意)同音，同时view组件uni-app中
最础最重要的组件，故取名uView，表达源于uni-app和Vue之意，同时在此也对它示感谢。"></u--text>

#小程序开放能力

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

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

API

#List Props

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