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,一经查实,立即删除!

相关文章

javafx写一个文档编辑器

文本编辑器是一种用于编辑纯文本文件的工具。它具有基本的文本编辑功能,如插入、删除、复制、粘贴等。文本编辑器通常不具备格式化文本、排版和图形编辑等高级功能,专注于纯文本的编辑。常见的文本编辑器包括记事本(Notepad)、Sublime Text、Visual Studio Code、Atom、Emacs…

【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;“…

OpenHarmony开发者自测试框架初学指南

OH开发者自测试框架初学指南 前言前置环境搭建wsl2安装wsl2迁移源码下载编译环境 测试框架应用环境搭建libreadline-dev安装python库安装nfs-kernel-server验证 windows环境准备vscodeusbipd 生成测试用例更改BUILD.gn的配置项关于fuzz配置编写fuzz用例编译fuzz用例执行 后记 前…

redis在linux集群部署

1.下载redis wget http://download.redis.io/releases/redis-3.2.9.tar.gz 2.解压redis tar -zxvf redis-3.2.9.tar.gz 3.安装redis 在解压redis目录下 make install /usr/soft/redis/ 4.启动redis 在redis的bin目录 执行 ./redis.conf 5.设置redis 端口 密码 集群 vim redis.c…

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…

不浪费原料的汉堡制作方案(LeetCode日记)

LeetCode-1276-不浪费原料的汉堡制作方案 题目信息: 圣诞活动预热开始啦&#xff0c;汉堡店推出了全新的汉堡套餐。为了避免浪费原料&#xff0c;请你帮他们制定合适的制作计划。 给你两个整数 t o m a t o S l i c e s tomatoSlices tomatoSlices 和 c h e e s e S l i c…

【uniapp】Uniapp cli 自动化打包脚本实现

一、前言 通常使用uniapp开发app时&#xff0c;大多数会使用项目的云服务打包&#xff0c;否则的话再借助原生会变得极其复杂&#xff0c;还要去安装对应大内存的环境。如果恰好此时&#xff0c;你有一个需求是&#xff0c;可以随意的更换logo和封面、标题切换成另外一个app&a…

Hadoop集成对象存储和HDFS磁盘文件存储

1.环境配置 1.1 版本说明 组件版本是否必须其他事项Hadoop3.3.0是hadoop3.3.0之后原生支持国内主要对象存储Hive3.1.3否实测没有Hive也可以使用sparksql&#xff0c;使用hive更好的管理HDFS数据spark3.3.1是hive和spark整合后&#xff0c;语法为HSQL&#xff0c;自定义函数按…

深入理解 golang 中的反射机制

目录 什么是反射 反射的使用方法 反射的应用场景 反射的性能考量 反射的最佳实践 小结 反射机制是计算机科学中的一个重要概念&#xff0c;程序通过反射可以在运行时访问、检测和修改自身的状态和行为。Golang 作为静态类型的编译型语言&#xff0c;虽然在设计上倾向于简…

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

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

大语言模型激活函数绘图

使用torch中的激活函数&#xff0c;绘制多个激活函数多一个图中对比展示 引入依赖 import torch from torch.nn import functional as F import matplotlib.pyplot as plt plt.rcParams[font.sans-serif] [Arial Unicode MS]定义单个曲线图的绘制函数 def draw_single_plot…

解决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 …