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是否显示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.mfbz.cn/a/272846.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32 cubeMX 人体红外模块实验

本文代码使用HAL库。 文章目录 前言一、人体红外模块介绍工作原理&#xff1a; 二、人体红外原理图解读三、STM32 cubeMX配置红外模块四、代码编写总结 前言 实验开发板&#xff1a;STM32F051K8。所需软件&#xff1a;keil5 &#xff0c; cubeMX 。实验目的&#xff1a;了解 人…

【流复制环境PostgreSQL-14.1到PostgreSQL-16.1大版本升级】

PostgreSQL大版本会定期添加新特性&#xff0c;这些新特性通常会改变系统表的布局&#xff0c;但内部数据存储格式很少改变。pg_upgrade通过创建新的系统表和重用旧的用户数据文件来执行快速升级。 pg_upgrade升级主要有三种用法&#xff1a; 1、使用pg_upgrade拷贝升级。 2、…

Shell三剑客:awk(awk编辑编程)三

一、For 循环 For 循环的语法 for(variable addignment; condition; iteration peocess) {statement1statement2... } #for 语句首先执行初始化动作( initialisation )&#xff0c;然后再检查条件( condition )。如果条件为真&#xff0c;则执行动作( action )&#xff0c;然后…

【论文笔记】Run, Don’t Walk: Chasing Higher FLOPS for Faster Neural Networks

论文地址&#xff1a;Run, Dont Walk: Chasing Higher FLOPS for Faster Neural Networks 代码地址&#xff1a;https://github.com/jierunchen/fasternet 该论文主要提出了PConv&#xff0c;通过优化FLOPS提出了快速推理模型FasterNet。 在设计神经网络结构的时候&#xff…

网络编程--网络基础

这里写目录标题 协议的概念什么是协议典型协议 分层模型OSI七层模型与TCP/TP四层模型 通信过程协议格式以太网帧协议&#xff08;主要作用与mac地址&#xff0c;也就是网卡&#xff09;mac地址格式ARP协议总结 IP协议&#xff08;主要作用于IP&#xff09;UDP与TCP协议&#xf…

one wire(单总线)FPGA代码篇

一.引言 单总线&#xff08;OneWire&#xff09;是一种串行通信协议&#xff0c;它允许多个设备通过一个单一的数据线进行通信。这个协议通常用于低速、短距离的数字通信&#xff0c;特别适用于嵌入式系统和传感器网络。 二.one wire通信优点缺点 优点&#xff1a; 单一数据线…

扫描全能王启动鸿蒙原生应用开发,系HarmonyOS NEXT智能扫描领域首批

近期&#xff0c;“鸿蒙合作签约暨扫描全能王鸿蒙原生应用开发启动仪式”&#xff08;简称“签约仪式”&#xff09;正式举行。合合信息与华为达成鸿蒙合作&#xff0c;旗下扫描全能王将基于HarmonyOS NEXT正式启动鸿蒙原生应用开发。据悉&#xff0c;扫描全能王是鸿蒙在智能扫…

TG7050CKN,TG7050SKN ,TG7050CMN,TG7050SMN

爱普生推出的温补晶振型号&#xff1a;TG7050CKN&#xff0c;TG7050SKN &#xff0c;TG7050CMN&#xff0c;TG7050SMN频率范围为 10mhz ~ 54mhz 适用于广泛的频率需求。这几款的特点就是耐高温&#xff0c;温度可达105℃高温&#xff0c;而且都是高稳定性温补晶振&#xff0c;&…

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

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

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

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

ubuntu22.04搭建RTSP服务器

大致命令如下&#xff1a; git clone --depth 1 gitgithub.com:ZLMediaKit/ZLMediaKit.git sudo apt-get install build-essential sudo apt-get install cmake #除了openssl,其他其实都可以不安装 sudo apt-get install libssl-dev sudo apt-get install libsdl-dev sudo apt…

医院信息化-6 大模型与医疗

之前写了一系列跟医疗信息化相关的内容&#xff0c;其中有提到人工智能&#xff0c;但是写的都是原先的一些AI算法基础上的医疗应用。现在大模型出现的涌现推理能力确实让人惊讶&#xff0c;并且出现可商用化的可能性&#xff0c;因此最近一年关于大模型在医疗的应用也开始出现…

使用ffmpeg实现视频旋转并保持清晰度不变

1 原始视频信息 通过ffmpeg -i命令查看视频基本信息 ffmpeg -i source.mp4 ffmpeg version 6.1-essentials_build-www.gyan.dev Copyright (c) 2000-2023 the FFmpeg developersbuilt with gcc 12.2.0 (Rev10, Built by MSYS2 project)configuration: --enable-gpl --enable-…

智能三维数据虚拟现实电子沙盘

一、概述 易图讯科技&#xff08;www.3dgis.top&#xff09;以大数据、云计算、虚拟现实、物联网、AI等先进技术为支撑&#xff0c;支持高清卫星影像、DEM高程数据、矢量数据、无人机倾斜摄像、BIM模型、点云、城市白模、等高线、标高点等数据融合和切换&#xff0c;智能三维数…

python作业题百度网盘,python作业答案怎么查

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python作业题百度网盘&#xff0c;python作业答案怎么查&#xff0c;今天让我们一起来看看吧&#xff01; 1 以下代码的输出结果为&#xff1a; alist [1, 2, 3, 4] print(alist.reverse()) print(alist) A.[4, 3, 2, …

根据DCT特征训练CNN

记录一次改代码的挣扎经历&#xff1a; 看了几篇关于DCT频域的深度模型文献&#xff0c;尤其是21年FcaNet&#xff1a;基于DCT 的attention model&#xff0c;咱就是说想试试将我模型的输入改为分组的DCT系数&#xff0c;然后就开始下面的波折了。 第一次尝试&#xf…

在Centos7中利用Shell脚本:实现MySQL的数据备份

目录 自动化备份MySQL 一.备份数据库脚本 1.创建备份目录 2.创建脚本文件 3.新建配置文件&#xff08;连接数据库的配置文件&#xff09; 4.给文件权限(mysql_backup.sh) ​编辑 5.执行命令 (mysql_backup.sh) ​编辑 二.数据库通过备份恢复 1.创建脚…

多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测

多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测 目录 多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现SSA-BiLSTM麻雀算法优化…

k8s的二进制部署: 源码包部署

服务器IP软件包k8s--master0120.0.0.61kube-aplserver&#xff0c;kube-controer-manager&#xff0c;kube-scheduler&#xff0c;etcdk8s--master0220.0.0.62kube-controer-manager&#xff0c;kube-schedulernode节点0120.0.0.62kubelet&#xff0c;kube-proxy&#xff0c;et…

第九部分 图论

目录 例 相关概念 握手定理 例1 图的度数列 例 无向图的连通性 无向图的连通度 例2 例3 有向图D如图所示&#xff0c;求 A, A2, A3, A4&#xff0c;并回答诸问题&#xff1a; 中间有几章这里没有写&#xff0c;感兴趣可以自己去学&#xff0c;组合数学跟高中差不多&#xff0c…