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-WEIXINuni.$u.toast('请在微信小程序内查看效果')// #endif}},}
</script>

API

#List Props

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

#List Events

事件名说明回调参数
click点击触发事件-

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/579800.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【leetcode100-021】【矩阵】搜索二维矩阵 II

【题干】 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 【思路】 以右上角为起点斜着看这个矩阵&#xff0c;会发现&#xff0c;这是一颗二叉搜索树。 …

中间件系列 - Redis入门到实战(高级篇-分布式缓存)

前言 学习视频&#xff1a; 黑马程序员Redis入门到实战教程&#xff0c;深度透析redis底层原理redis分布式锁企业解决方案黑马点评实战项目 本内容仅用于个人学习笔记&#xff0c;如有侵扰&#xff0c;联系删除 学习目标 Redis持久化Redis主从Redis哨兵Redis分片集群 一 分…

每日一题——LeetCode876.链表的中间结点

个人主页&#xff1a;白日依山璟 专栏&#xff1a;Java|数据结构与算法|每日一题 1.题目描述 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例1 输入&#xff1a;head [1,2,3,4,5] 输出&…

nginx-proxy-manager初次登录502 bad gateway

nginx-proxy-manager初次登录502 bad gateway 按照官方docker-compose安装后,页面如下: 默认账户密码: adminexample.com/changeme点击sign in,提示Bad Gateway 打开调试 重装后依然如此,最后查阅githup issue 找到答案 https://github.com/NginxProxyManager/nginx-proxy-…

【教学类-43-01】20231226 九宫格数独1.0

作品展示——九宫格数独&#xff08;正方形手工纸&#xff09; 背景需求&#xff1a; 最近陆续出了“X-Y比大小”“X-Y加法判断题”&#xff0c;发现1/3大4班孩子都能完成&#xff0c;3-4位孩子表示“太简单”。 大4班20号同学&#xff0c;做完0-10的判断题后说&#xff1a;“…

mongodb聚合_删除_可视化工具

3.5 MongoDB中limit和skip MongoDB Limit() 方法 如果你需要在MongoDB中读取指定数量的数据记录&#xff0c;可以使用MongoDB的Limit方法&#xff0c;limit()方法接受一个数字参数&#xff0c;该参数指定从MongoDB中读取的记录条数。limit()方法基本语法如下所示&#xff1a;…

跟着LearnOpenGL学习12--光照贴图

文章目录 一、前言二、漫反射贴图三、镜面光贴图3.1、采样镜面光贴图 一、前言 在跟着LearnOpenGL学习11–材质中&#xff0c;我们讨论了让每个物体都拥有自己独特的材质从而对光照做出不同的反应的方法。这样子能够很容易在一个光照的场景中给每个物体一个独特的外观&#xf…

机器学习——决策树(三)

【说明】文章内容来自《机器学习——基于sklearn》&#xff0c;用于学习记录。若有争议联系删除。 1、案例一 决策树用于是否赖床问题。 采用决策树进行分类&#xff0c;要经过数据采集、特征向量化、模型训练和决策树可视化4个步骤。 赖床数据链接&#xff1a;https://pan…

解决Pycharm pip安装模块太慢问题,pycharm2022没有manage repositories配置镜像源

解决方案 方法清华阿里云中国科技大学华中理工大学 或者直接-i 加镜像 方法 URL写下面任意一个 清华 https://pypi.tuna.tsinghua.edu.cn/simple阿里云 http://mirrors.aliyun.com/pypi/simple/中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/华中理工大学 http:/…

钦丰科技(安徽)股份有限公司携卫生级阀门管件盛装亮相2024发酵展

钦丰科技(安徽)股份有限公司携卫生级阀门管件盛装亮相2024济南生物发酵展&#xff01; 展位号&#xff1a;2号馆A65展位 2024第12届国际生物发酵产品与技术装备展览会&#xff08;济南&#xff09;于3月5-7日在山东国际会展中心盛大召开&#xff0c;展会同期将举办30余场高质…

LENOVO联想笔记本小新Pro 14 IRH8 2023款(83AL)电脑原装出厂Win11系统恢复预装OEM系统

链接&#xff1a;https://pan.baidu.com/s/1M1iSFahokiIHF3CppNpL4w?pwdzr8y 提取码&#xff1a;zr8y 联想原厂系统自带所有驱动、出厂主题壁纸、Office办公软件、联想电脑管家等自带的预装软件程序 所需要工具&#xff1a;16G或以上的U盘 文件格式&#xff1a;ISO 文件…

django之drf框架(两个视图基类、5个扩展视图类、9个视图子类)

两个视图基类 APIView和GenericAPIView drf提供的最顶层的父类就是APIView&#xff0c;以后所有的类都继承自他 GenericAPIView继承自APIView&#xff0c;他里面封装了一些工能 基于APIViewModelSerializerResposne写5个接口 子路由&#xff1a;app01>>>urls.py …

【C++】开源:fast-cpp-csv-parser数据解析库配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍fast-cpp-csv-parser数据解析库配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一…

linux开放tomcat 8080端口

1、查看8080是否开放 firewall-cmd --query-port8080/tcp查看已开启的端口 firewall-cmd --list-ports开启防火墙 systemctl start firewalld2、永久开放8080端口 firewall-cmd --zonepublic --add-port8080/tcp --permanent3、重加载&#xff08;重启防火墙&#xff09; …

UDP信号多个电脑的信息传输测试、配置指南

最近要做一个东西&#xff0c;关于一个软件上得到的信号&#xff0c;如何通过连接的局域网&#xff0c;将数据传输出去。我没做过相关的东西&#xff0c;但是我想应该和软件连接数据库的过程大致是差不多的&#xff0c;就一个ip和一个端口号啥的。 一.问题思路 多个设备同时连…

【宇宙猜想】AR文创入驻今日美术馆、北京天文馆等众多展馆,在AR互动中感受科技魅力!

近日&#xff0c;由「宇宙猜想」推出的AR系列文创产品先后入驻今日美术馆、北京天文馆、国家自然博物馆、上海天文馆、国家海洋馆、中华手工展馆等各大馆场并与其展开相关合作。 「宇宙猜想」致力于创造虚拟空间价值&#xff0c;用AR技术与文创产品碰撞出新的火花&#xff0c;为…

数据结构与算法(C语言版)P10——图

1、图的基本概念和术语 前面学过&#xff1a; 线性是一对一树形是一对多 而今天要学习的图形结构是多对多。 图的定义&#xff1a; G(V,E) V&#xff1a;顶点(数据元素)的__有穷非空__集合。E&#xff1a;边的有穷集合。 __有向图&#xff1a;__每条边都是有方向的 __无…

Hive实战:词频统计

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据文件1、在虚拟机上创建文本文件2、将文本文件上传到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、启动Hive Metastore服务2、启动Hive客户端3、基于HDFS文件创建外部表4、利用Hive SQL…

物联网协议Coap之Californium CoapServer解析

目录 前言 一、CoapServer对象 1、类对象定义 2、ServerInterface接口 3、CoapServer对象 二、CoapServer服务运行分析 1、CoapServer对象实例化 1.1 调用构造方法 1.2 生成全局配置 1.3 创建Resource对象 1.4-1.8、配置消息传递器、添加CoapResource 1.9-1.12 创建线…

Dash中 基本的 callback 5

app.callback 在Dash中&#xff0c;app.callback 被用于创建交互性应用程序&#xff0c;它用于定义一个回调函数&#xff0c;该函数在应用程序中发生特定事件时被触发。回调函数可以修改应用程序的布局或更新图表等内容&#xff0c;从而实现动态交互。 下面是一个简单的 app.…