纯CSS实现未读消息显示99+
在大佬那看到这个小技巧,我觉得这个功能点还挺常用,所以给大家分享下具体的实现。当未读消息数小于100的时候显示准确数值,大于99的时候显示99+。
1. 实现效果
2. 组件封装
<template><span class="col"><sup :style="{'--num':num}">{{num}}</sup></span>
</template><script>
export default {name: 'unread',props:{num:{type: Number,default: 0}}
}
</script>
<style>
.col {display: inline-flex;width: 4rem; height: 4rem;align-items: center;justify-content: center;
}.col sup {position: absolute;box-sizing: border-box;min-width: 1rem;padding: 0 0.1875rem;color: #fff;font-size: min(.75rem, calc(10000px - var(--num) * 100px));line-height: 1.2;text-align: center;background-color: #eb4646;border: 1px solid #fff;border-radius: 1rem;transform: translate(calc(40% + .375rem), -.75rem);/* 数值为0的时候隐藏 */opacity: var(--num);
}
.col sup::before {content: '99+';font-size: min(.75rem, calc(var(--num) * 100px - 9900px));
}
</style>
3. 使用
<Unread :num="0"/> // 为0隐藏<Unread :num="9"/><Unread :num="99"/><Unread :num="999"/>
相关文章:
纯CSS实现未读消息显示99+
在大佬那看到这个小技巧,我觉得这个功能点还挺常用,所以给大家分享下具体的实现。当未读消息数小于100的时候显示准确数值,大于99的时候显示99。 1. 实现效果 2. 组件封装 <template><span class"col"><sup :styl…...
【C++】C++ primer plus 第十二章--类和动态内存分配
动态内存和类 关于静态数据成员 类之作声明,不分配内存,因此静态成员变量在类中不能进行初始化,需要在类外进行。特殊情况: 存在可以在类中声明静态成员并初始化的情况,成员类型为const整型或者const枚举类型。 特殊…...
分类预测 | Matlab实现GWO-LSSVM灰狼算法优化最小二乘支持向量机数据分类预测
分类预测 | Matlab实现GWO-LSSVM灰狼算法优化最小二乘支持向量机数据分类预测 目录 分类预测 | Matlab实现GWO-LSSVM灰狼算法优化最小二乘支持向量机数据分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现GWO-LSSVM灰狼算法优化最小二乘支持向量机数据…...
使用PHP进行极验验证码动态参数提取与逆向分析
在网络安全领域,逆向工程和验证码破解是常见的技术挑战之一。极验验证码作为一种常见的人机验证工具,其动态参数的提取和逆向分析对于验证码的破解至关重要。本文将介绍如何使用PHP语言进行极验验证码动态参数的提取与逆向分析。 1. 准备工作 在开始之前…...
43.1k star, 免费开源的 markdown 编辑器 MarkText
43.1k star, 免费开源的 markdown 编辑器 MarkText 分类 开源分享 项目名: MarkText -- 简单而优雅的开源 Markdown 编辑器 Github 开源地址: https://github.com/marktext/marktext 官网地址: MarkText 支持平台: Linux, macOS 以及 Win…...
ArcGIS Pro怎么进行挖填方计算
在工程实施之前,我们需要充分利用地形,结合实际因素,通过挖填方计算项目的标高,以达到合理控制成本的目的,这里为大家介绍一下ArcGIS Pro中挖填方计算的方法,希望能对你有所帮助。 数据来源 教程所使用的…...
POLY - Survival Melee Weapons
一个轻便、有趣且灵活的低多边形资源包,非常适合原型设计或添加到低多边形世界中。超过50种近战武器、刀、斧、棍棒、棍棒等。 此套餐非常适合第三人称或自上而下的观看。 除此之外,资产还包括开发生存游戏可能需要的任何细节。 整个包是以多边形风格创建的,可以与其他多边…...
【ARMv7-M】| 01——阅读笔记 | 简介|应用程序级编程和内存模型
系列文章目录 【ARMv7-M】| 01——阅读笔记 | 简介|应用程序级编程和内存模型 失败了也挺可爱,成功了就超帅。 文章目录 前言1、简介2、应用程序级编程模型2.1 编程模式和访问等级2.2 数据类型和运算操作2.3 寄存器和执行状态1.2.4 异常和中断1.2.5 浮点单元寄存器…...
用Python做一个4399游戏脚本原来这么简单 !(内含完整思路)
说明 简述:本文将以4399小游戏《宠物连连看经典版2》作为测试案例,通过识别小图标,模拟鼠标点击,快速完成配对。对于有兴趣学习游戏脚本的同学有一定的帮助。 运行环境:Win10/Python3.5。 主要模块:win3…...
【计算机网络】应用层——HTTPS协议详解
文章目录 1. HTTPS 协议简介2. 了解“加密”3. HTTPS 保证数据安全传输的三大机制3.1 引入对称加密3.2 引入非对称加密3.3 引入“SSL/TLS证书”(防止中间人攻击)3.4 HTTPS安全机制总结 📄前言: 前面的文章已经对 HTTP 协议 进行了…...
私家侦探如何追踪难以找到的人?
私家侦探如何追踪难以找到的人? 私家侦探经常受雇于无从下手的情况,要在稀缺的信息中寻找蛛丝马迹,追踪那些难以捉摸的目标。在众多情境中,私家侦探或许能挖掘出丰富的信息。然而,若目标人物决心隐匿行踪,逃…...
一文讲透亚马逊云命令行使用
从配置开始 学习使用亚马逊云,自然免不了使用命令行工具,首先我们从下载和配置开始: 现在都使用V2版本的命令行工具,可以从官网下载最新的二进制安装包。1 首先是配置凭证: aws configure 输入之后会提示输入AK/SK…...
感染了后缀为.jayy勒索病毒如何应对?数据能够恢复吗?
导言: 在当今数字化的世界中,网络安全已经成为了每个人都需要关注的重要议题。而勒索病毒作为网络安全领域中的一大威胁,不断地演变和升级,给个人和组织带来了严重的损失和困扰。近期,一种名为.jayy的勒索病毒引起了广…...
一键快速彻底卸载:Mac软件轻松删除,瞬间释放磁盘空间
在接手使用前任员工遗留的Mac电脑时,经常面临的一个问题是内置了大量的非必要软件,这些软件不仅侵占了硬盘资源,还可能影响电脑整体性能。因此,迅速有效地删除这些冗余软件,以达成设备清爽、高效的初始化状态极其重要。…...
(React Hooks)前端八股文修炼Day9
一 对 React Hook 的理解,它的实现原理是什么 React Hooks是React 16.8版本中引入的一个特性,它允许你在不编写类组件的情况下,使用state以及其他的React特性。Hooks的出现主要是为了解决类组件的一些问题,如复杂组件难以理解、难…...
工厂方法模式:灵活的创建对象实例
在软件开发中,我们经常需要创建对象,但直接new一个实例可能会导致代码的耦合性增加,降低了代码的灵活性和可维护性。工厂方法模式(Factory Method Pattern)是一种创建型设计模式,它提供了一种创建对象的接口…...
vue-codeirror编辑器vue3中的使用
vue-codeirror编辑器vue3中的使用 <script lang"ts" setup> import { ref,reactive } from vue; import { Codemirror } from "vue-codemirror"; import { oneDark } from "codemirror/theme-one-dark"; import { json } from codemirror/…...
搭建python编译环境
目录 1.安装依赖包 2.安装失败进行换源 3. 更新系统 通过C 语言调用 Python 代码,需要先安装 libpython3 的 dev 依赖库(不同的 ubuntu 版本下, python 版本 可能会有差异, 比如ubuntu 22.04 里是 libpython3.10-dev )…...
微信小程序登录流程
文章目录 1. 用户触发登录操作2. 获取临时登录凭证3. 发送登录凭证到服务器4. 后端使用 code 获取 session_key 和 openid5. 后端保存 session_key 和 openid 返回token6. 前端保存登录态 1. 用户触发登录操作 用户在小程序内部点击登录按钮或进行需要登录权限的操作ÿ…...
FPGA + 图像处理(三)生成3x3像素矩阵
前言 生成NxN的像素矩阵是对图像进行各类滤波操作的基本前提,本文介绍一种通过bram生成3x3矩阵的方法。 程序 生成bram核 因为本文介绍的是基于bram生成的3x3像素矩阵,所以要先生成两个bram核,用于缓存前两行图像数据 在 IP catalog中选…...
Redis安装说明2
Redis安装说明 1.3.2.指定配置启动 如果要让Redis以后台方式启动,则必须修改Redis配置文件,就在我们之前解压的redis安装包下(/usr/local/src/redis-6.2.6),名字叫redis.conf: 我们先将这个配置文件备份一…...
ArcGIS10.8保姆式安装教程
ArcGIS 10.8是一款非常强大的地理信息系统软件,用于创建、管理、分析和可视化地理数据。以下是ArcGIS 10.8的详细安装教程: 确保系统满足安装要求 在开始安装之前,请确保您的计算机满足以下系统要求: 操作系统:Windo…...
设计原则、设计模式、设计模式项目实战
设计原则 封装、继承、多态、抽象分别可以解决哪些编程问题 封装:也叫做信息隐藏或数据保护访问。数据 通过暴露有限的访问接口,授权外部仅能通过类提供接口访问,对内的类private私有化属性,通过封装简化操作,让用户更…...
【Redis】解决List类型的消息可靠性问题
前言 平时做后端开发时,如果需要用到消息队列功能,但公司的IT环境又没有提供专业的队列软件(RabitMQ/Kafka…),那么在简单且要求不高的场景下,可以使用 Redis 的List数据类型来做消息队列。 但List类型有…...
挑战30天C++基本入门(DAY8--树)[part 3](速通哦~)
#上一章我们把搜索二叉树的知识给传授完毕,如果认真的看下去并且手打了几遍,基本上内部的逻辑还是可以理解的,那我们现在就截至继续学习树的一些重要知识啦~~ 树高怎么求呀?如果用上一次学的层次遍历来求树高,有点小题…...
在虚拟机尝试一次用启动盘重装系统
在虚拟机尝试一次用启动盘重装系统 没有自己重装过系统,也不敢对自己的笔记本下手,用虚拟机重装玩玩试试。 先设置成u盘启动 从boot中选择相应的创建的硬盘即可(刚刚突然发现图片不能上传了,经过乱七八糟的尝试后,开一…...
力扣347. 前 K 个高频元素
思路:记录元素出现的次数用map; 要维护前k个元素,不至于把所有元素都排序再取前k个,而是新建一个堆,用小根堆存放前k个最大的数。 为什么是小根堆?因为堆每次出数据时只出堆顶,每次把当前最小的…...
SCP 从Linux快速下载文件到Windows本地
需求:通过mobaxterm将大文件拖动到windows本地速度太慢。 环境:本地是Windows,安装了Git。 操作:进入文件夹内,鼠标右键,点击Git Bash here,然后输入命令即可。这样的话,其实自己本…...
plasmo内容UI组件层级过高导致页面展示错乱
我使用plasmo写了一个行内样式的UI组件,但是放到页面上之后,会和下拉组件出现层级错乱,看了一下样式,吓我一跳:层级竟然设置的如此之高 所以就需要将层级设置低一点: #plasmo-shadow-container {z-index: …...
《QT实用小工具·十一》Echart图表JS交互之仪表盘
1、概述 源码放在文章末尾 该项目为Echart图表JS交互之炫酷的仪表盘,可以用鼠标实时改变仪表盘的读数。 下面为demo演示: 该项目部分代码如下: #include "widget.h" #include "ui_widget.h" #include "qurl.h&q…...
武昌网站建设/搜索引擎优化指的是什么
一、题目描述 请实现一个函数,用来判断一棵二叉树是不是对称的。如果一棵二叉树和它的镜像一样,那么它是对称的。 例如,二叉树 [1,2,2,3,4,4,3] 是对称的。 但是下面这个 [1,2,2,null,3,null,3] 则不是镜像对称的: 示例 1: 输入&a…...
重庆网站制作公司靠谱吗/html网页设计模板
TensorBoard简介 TensorBoard是TensorFlow自带的一个强大的可视化工具,也是一个Web应用程序套件。TensorBoard目前支持7种可视化,Scalars,Images,Audio,Grap…...
什么网站可以做时间加减/网页搜索关键词
(1) 在客户端,Get方式在通过URL提交数据,数据在URL中可以看到;POST方式,数据放置在HTML HEADER内提交。 (2) GET方式提交的数据最多只能有1024 Byte,而POST则没有此限…...
郑州区块链数字钱包网站开发多少钱/廊坊seo整站优化软件
前面我们认识了数据类型和变量,但是单纯的知道这些并不能让我们计算机进行复杂的寻算,所以今天我们学习运算符(对数据进行操作),以及各种语句,实现较为复杂的计算机流程运算。运算符:单目&#…...
公安局网站不备案/百度网址怎么输入?
为什么80%的码农都做不了架构师?>>> http://www.bitscn.com/pdb/mysql/201504/483583.html http://www.bitscn.com/pdb/mysql/201504/483583.html 转载于:https://my.oschina.net/michao/blog/689177...
app公司开发/浙江seo外包费用
我有3个表:tco_articles,tco_module_eostext和tco_articles_modules.我的tco_articles有唯一的id键.每篇文章一篇.我的tco_module_eostext具有属于每篇文章的唯一instance_id.我的tco_articles_modules包含所有article_ids,但是其他表中使用的instance_ids的数量是9…...