uniapp中uview的text组件

简介: uniapp中uview的text组件


基本使用:

  • 通过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

#List Events

事件名 说明 回调参数
click 点击触发事件 -
相关文章
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
43 0
在线课堂+工具组件小程序uniapp移动端源码
|
3月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
167 10
|
3月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
146 5
|
3月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
159 2
|
3月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
111 1
|
3月前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
62 0
|
3月前
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
104 0
|
3月前
|
编解码 数据可视化 API
DIY可视化UniApp表格组件
DIY可视化UniApp表格组件
58 0
|
3月前
|
机器学习/深度学习 算法 数据可视化
UniApp手机滑块验证组件代码生成器
UniApp手机滑块验证组件代码生成器
107 0
|
3月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
138 0