uView Badge 徽标数

该组件一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。

#平台差异说明

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

#基本使用

  • 通过value参数定义徽标内容
  • 通过type设置主题。重申一次,uView中,所有组件的type参数都只有5个固定的可选值,分别是primary(蓝色-主色),warning(黄色-警告), error(红色-错误),success(绿色-成功),info(灰色-信息)
  • 通过max参数控制最大值,超过最大值会显示 '{max}+'

注意

此组件内部默认为absolute绝对定位,所以需要给badge父组件(元素)设置position: relative相对定位, 再通过调整offset偏移值(数组,两个元素,第一个元素为top值,第二个元素为right值,单位rpx,可为负值,如"[-10, -10]")设置到合适的位置即可。
如果不需要组件内容默认的自动绝对定位,设置absolute参数为false即可。

<template><view style="padding: 20px;"><view class="box"><u-badge :type="type" max="99" :value="value"></u-badge></view></view>
</template><script>
export default {data() {return {type:"warning",value:100}}
};
</script><style lang="scss" scoped>.box{width: 100px; height: 100px;background-color: #909193;border-radius: 15px;}
</style>

copy

#设置徽标的类型为一个圆点

通过isDot参数设置,该形式组件没有内容,只显示一个圆点

<u-badge :isDot="true" type="success"></u-badge>

copy

#设置数字的显示方式 overflow|ellipsis|limit

  • overflow会根据max字段判断,超出显示${max}+
  • ellipsis会根据max判断,超出显示${max}...
  • limit会依据1000作为判断条件,超出1000,显示${value/1000}K,比如2.2k、3.34w,最多保留2位小数
<template><view style="padding: 20px;"><view class="box"><u-badge numberType="overflow" :type="type" max="99" :value="value"></u-badge></view><view class="box"><u-badge numberType="ellipsis" :type="type" max="99" :value="value"></u-badge></view><view class="box"><u-badge numberType="limit" :type="type" max="99" :value="value"></u-badge></view></view>
</template><script>
export default {data() {return {type:"warning",value:99999}}
};
</script><style lang="scss" scoped>.box{width: 100px; height: 100px;background-color: #909193;border-radius: 15px;}
</style>

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

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

相关文章

【教你如何制作一个简单的HTML个人网页】

制作一个简单的HTML个人网页 创建一个简单个人的HTML网页很容易&#xff0c;下面是一个基本的示例&#xff0c;其中包含一些常见的元素&#xff0c;比如标题、段落、一张图片和一些链接&#xff0c;请记住&#xff0c;您将需要一个地方来存储您的HTML文件和任何相关资源&#…

电子商务类网站搭建需要注意的几点。

随着电子商务的迅猛发展&#xff0c;越来越多的企业和创业者选择在互联网上开设自己的电商网站。为了确保电商网站能够高效运行&#xff0c;给用户提供良好的体验&#xff0c;选择合适的服务器配置至关重要。 一、硬件配置 1、 CPU&#xff08;中央处理器&#xff09; 电商网…

STM32CubeMX学习笔记23---FreeRTOS(任务的挂起与恢复)

1、硬件设置 本实验通过freertos创建两个任务来分别控制LED2和LED3的亮灭&#xff0c;需要用到的硬件资源 LED2和LED3指示灯串口 2、STM32CubeMX设置 根据上一章的步骤创建两个任务&#xff1a;STM32CubeMX学习笔记22---FreeRTOS&#xff08;任务创建和删除&#xff09;-CS…

vue01

一、什么是vue.js&#xff08;单页面应用程序&#xff09; 用于构建用户界面的渐进式框架&#xff0c;采用自底向上增量开发的设计。核心理念&#xff1a;数据驱动视图&#xff0c;组件化开发前端三大主流框架&#xff1a;Vue.js Angular.js React.js 二、为什么学习流行框架…

1060:均值

【题目描述】 给出一组样本数据&#xff0c;包含n个浮点数&#xff0c;计算其均值&#xff0c;精确到小数点后4位。 【输入】 输入有两行&#xff0c;第一行包含一个整数n&#xff08;n小于100&#xff09;&#xff0c;代表样本容量&#xff1b;第二行包含n个绝对值不超过10…

FPGA - SPI总线介绍以及通用接口模块设计

一&#xff0c;SPI总线 1&#xff0c;SPI总线概述 SPI&#xff0c;是英语Serial Peripheral interface的缩写&#xff0c;顾名思义就是串行外围设备接口。串行外设接口总线(SPI)&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线&#xff0c;并且在芯片的…

Debian时间和时区配置

1. 时区 1.1. 查看时区 timedatectl输出 Local time: Thu 2024-03-07 13:46:06 CSTUniversal time: Thu 2024-03-07 05:46:06 UTCRTC time: Thu 2024-03-07 05:46:06Time zone: Asia/Shanghai (CST, 0800) System clock synchronized: yesNTP service: activeRTC in local TZ…

面试十一、代理模式

代理模式是一种结构型设计模式&#xff0c;旨在为其他对象提供一种代理或替代方法&#xff0c;以控制对这些对象的访问。在代理模式中&#xff0c;代理对象充当了客户端和目标对象之间的中间人&#xff0c;客户端通过代理访问目标对象&#xff0c;而不直接访问目标对象。 代理模…

【C++】为什么vector的地址与首元素地址不同?

文章目录 一、问题发现&#xff1a;二、结果分析三、问题解析 一、问题发现&#xff1a; &vector和&vector[0]得到的两个地址居然不相同&#xff0c;对数组array取变量名地址和取首元素地址的结果是相同的。这是为啥呢&#xff1f; 使用下面代码进行验证&#xff1a;…

Oracle中全表扫描优化方法

在Oracle数据库中&#xff0c;全表扫描&#xff08;Full Table Scan, FTS&#xff09;是指查询执行时扫描表的所有数据块来获取结果集。虽然在某些场景下全表扫描可能是最优选择&#xff08;例如&#xff1a;当需要访问大部分或全部数据、表很小或者索引访问成本高于全表扫描时…

MKdocs博客中文教程 - 已经整理到知乎专栏

MKdocs博客中文教程 - 知乎 Mkdocs-Wcowin中文主题 通过主题和目录以打开文章 基于Material for MkDocs美化简洁美观&#xff0c;功能多元化简单易上手&#xff0c;小白配置教程详细&#xff0c;清晰易懂

html5cssjs代码 035 课程表

html5&css&js代码 035 课程表 一、代码二、解释基本结构示例代码常用属性样式和装饰响应式表格辅助技术 一个具有亮蓝色背景的网页&#xff0c;其中包含一个样式化的表格用于展示一周课程安排。表格设计了交替行颜色、鼠标悬停效果以及亮色表头&#xff0c;并对单元格设…

C++基础之运算符重载续(十三)

一.函数调用运算符 我们知道&#xff0c;普通函数执行时&#xff0c;有一个特点就是无记忆性&#xff0c;一个普通函数执行完毕&#xff0c;它所在的函数栈空间就会被销毁&#xff0c;所以普通函数执行时的状态信息&#xff0c;是无法保存下来的&#xff0c;这就让它无法应用在…

python实现 linux 执行命令./test启动进程,进程运行中,输入参数s, 再输入参数1, 再输入参数exit, 获取进程运行结果重定向写入到文件

要在 Python 中实现执行 ./test 启动进程&#xff0c;并在进程运行中依次输入参数 s、1&#xff0c;最后输入参数 exit&#xff0c;并将进程的输出结果重定向写入到文件&#xff0c;你可以使用 subprocess 模块。以下是一个示例代码&#xff1a; import subprocess# 启动 test…

MoonBit 首场 MeetUp 活动火热报名中!更多活动惊喜等你来探索!

首场线下MeetUp来啦&#xff01; 在数字化浪潮中&#xff0c;基础软件构筑了信息产业发展的根基&#xff0c;不仅是技术进步的支柱&#xff0c;也是推动经济增长的重要力量。基础软件的发展不仅关乎硬件的完善与应用软件的创新&#xff0c;更是连接过去与未来的桥梁。 尽管中国…

Docker容器化技术(docker-compose安装部署案例)

docker-compose编排工具 安装docker-compose [rootservice ~]# systemctl stop firewalld [rootservice ~]# setenforce 0 [rootservice ~]# systemctl start docker[rootservice ~]# wget https://github.com/docker/compose/releases/download/v2.5.0/docker-compose-linux-…

anaconda迁移深度学习虚拟环境 在云服务器上配置

1 anaconda 虚拟环境操作 1、 查看虚拟环境 conda info -e2、 创建新的虚拟环境 conda create -n deeplearning_all pip python3.63、 激活新建的虚拟环境 Conda activate deeplearning_all2 环境中相关库的版本即安装说明&#xff08;这些库都是对应匹配的&#xff09; …

Lenze伦茨8400变频器E84A L-force Drives 操作使用说明

Lenze伦茨8400变频器E84A L-force Drives 操作使用说明

跟selenium并肩的自动化神器 Playwright 的 Web 自动化测试解决方案

1. 主流框架的认识 总结&#xff1a; 由于Selenium在3.x和4.x两个版本的迭代中并没有发生多大的变化&#xff0c;因此Selenium一统天下的地位可能因新框架的出现而变得不那么稳固。后续的Cypress、TestCafe、Puppeteer被誉为后Selenium时代Web UI自动化的三驾马车。但是由于这三…

JavaEE 初阶篇-深入了解操作系统中的进程与 PCB

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 关于计算机是如何进行工作的 “常识” 1.1 关于寄存器、缓存与内存是如何配合 CPU “工作” 2.0 操作系统概述 2.1 操作系统内核 2.2 进程 2.3 PCB 2.3.1 PCB 属性…