uniapp中uview的text组件

基本使用:

  • 通过text参数设置文本内容。推荐您使用:text='value'的形式
javascript 复制代码
<u--text text="我用十年青春,赴你最后之约"></u--text>

设置主题:

  • 通过type参数设置文本主题,我们提供了五类属性。
  • primary error success warning info
html 复制代码
<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
  • 除此之外还有格式化日期,姓名脱敏,超链接,千分位金额等属性,将在以下实例中展示
html 复制代码
<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

#List Events

事件名 说明 回调参数
click 点击触发事件 -
相关推荐
为风而战36 分钟前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
雪碧聊技术5 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
@Dream_Chaser5 小时前
uniapp页面间通信
uni-app
@Dream_Chaser10 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
鱼是一只鱼啊10 小时前
uniapp移动端地图提示鉴权失败请传入正确的key问题处理
uni-app
毛毛三由10 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
雪碧聊技术12 小时前
uniapp简介
uni-app·hbuilder
一只一只妖12 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
y东施效颦16 小时前
uni-app uni-push 2.0推送图标不展示问题
uni-app·github
初晨未凉16 小时前
uniapp返回webview返回小程序并且跳转回webview
小程序·uni-app