uView Text 文本

简介: uView Text 文本

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

注意:

由于在nvue下,u-text名称被uni-app官方占用,在nvue页面中请使用u--text名称,在vue页面中使用u--text或者u-text均可。

#平台差异说明

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

#基本使用

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

copy

#设置主题

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

copy

#拨打电话

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

copy

#日期格式化

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

copy

#姓名脱敏

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

copy

#超链接

添加href指定链接地址

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

copy

#显示金额

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

copy

#前后图标

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

<u--text prefixIcon="baidu" iconStyle="font-size: 19px" text="百度一下,你就知道"></u--text>
<u--text suffixIcon="arrow-leftward" iconStyle="font-size: 18px" text="查看更多"></u--text>

copy

#超出隐藏

内置了文字超出隐藏样式,设置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>

copy

#小程序开放能力

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

<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>
相关文章
SVG 文本(二)路径文本 <textPath>
SVG 文本(二)路径文本 <textPath>
228 0
|
2月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
6月前
|
小程序 前端开发
【微信小程序】-- 常用的基础内容组件介绍 -- text & rich-text & progress & icon(七)
【微信小程序】-- 常用的基础内容组件介绍 -- text & rich-text & progress & icon(七)
|
6月前
Text文本框简单实例
Text文本框简单实例
60 1
|
6月前
css3快速完成重构title提示tip样式
css3快速完成重构title提示tip样式
|
容器
css3的text(文本)
css3的text(文本)
55 0
Echarts除了tooltip其它的标签暂时都不支持html情况下label标签加背景图片的美化方案
Echarts除了tooltip其它的标签暂时都不支持html情况下label标签加背景图片的美化方案
124 0
|
JavaScript 前端开发 Python
brython | 获取input等标签的内容
brython | 获取input等标签的内容
121 0
|
前端开发
CSS 文字装饰 text-decoration & text-emphasis
CSS 文字装饰 text-decoration & text-emphasis
178 0
CSS 文字装饰 text-decoration & text-emphasis
sketch 如何规范的设置自己的字体样式库( Text styles )
sketch 如何规范的设置自己的字体样式库( Text styles )
sketch 如何规范的设置自己的字体样式库( Text styles )