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 点击触发事件 -
相关推荐
耶啵奶膘7 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
我开心就好o14 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index14 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情21 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑0071 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字1 天前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔1 天前
uniapp rpx兼容平板
uni-app
荔枝吖1 天前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗1 天前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo14161 天前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app