element-ui badge 组件源码分享

今日简单分享 badge 组件的源码实现,主要从以下两个方面:

1、badge 组件页面结构

2、badge 组件属性

一、badge 组件页面结构

二、badge 组件属性

补充几个标签的用途: sub:下标、sup:上标、var 变量

代码如下:

<p><var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var><br/><var>a<sub>1</sub></var>+<var>a<sub>2</sub></var>=<var>c<sub>1</sub></var>
</p>

显示效果如下:

2.1 value 属性,显示值,类型 string, number,无默认值。

2.2 max 属性,最大值,超过最大值会显示 '{max}+',要求 value 是 Number 类型,类型 number,无默认值。

2.3 is-dot 属性,小圆点,类型 boolean,默认 false。

2.4 hidden 属性,隐藏 badge,类型 boolean,默认 false。

2.5 type 属性,类型,类型 string,primary / success / warning / danger / info,默认 danger。

组件使用如下:

展示效果如下:

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

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

相关文章

<网络> 网络Socket 编程基于UDP协议模拟简易网络通信

目录 前言&#xff1a; 一、预备知识 &#xff08;一&#xff09;IP地址 &#xff08;二&#xff09;端口号 &#xff08;三&#xff09;端口号与进程PID &#xff08;四&#xff09;传输层协议 &#xff08;五&#xff09;网络字节序 二、socket 套接字 &#xff08;…

Java基础知识总结(第八篇):集合:Collection(List、Set)、Map、Collections 工具类

声明: 1. 本文根据韩顺平老师教学视频自行整理&#xff0c;以便记忆 2. 若有错误不当之处, 请指出 系列文章目录 Java基础知识总结&#xff08;第一篇&#xff09;&#xff1a;基础语法 Java基础知识总结&#xff08;第二篇&#xff09;&#x…

Kaggle:收入分类

先看一下数据的统计信息 import pandas as pd # 加载数据&#xff08;保留原路径&#xff0c;但在实际应用中建议使用相对路径或环境变量&#xff09; data pd.read_csv(r"C:\Users\11794\Desktop\收入分类\training.csv", encodingutf-8, encoding_errorsrepl…

STM32-02基于HAL库(CubeMX+MDK+Proteus)GPIO输出案例(LED流水灯)

文章目录 一、功能需求分析二、Proteus绘制电路原理图三、STMCubeMX 配置引脚及模式&#xff0c;生成代码四、MDK打开生成项目&#xff0c;编写HAL库的GPIO输出代码五、运行仿真程序&#xff0c;调试代码 一、功能需求分析 在完成开发环境搭建之后&#xff0c;开始使用STM32GP…

玩机进阶教程-----高通9008线刷XML脚本修改备份 檫除的操作步骤解析

在高通9008官方固件中我们可以看到刷写需要的脚本rawprogram0.xml和辅助脚本patch0.xml&#xff0c;脚本的作用在于将固件内各个分区对应写入手机内。根据分区地址段。然后判断脚本中那些分区不写入。以下步骤将分析emmc字库为例来讲解如何将默认刷入脚本修改为备份 檫除脚本。…

2013年认证杯SPSSPRO杯数学建模B题(第二阶段)流行音乐发展简史全过程文档及程序

2013年认证杯SPSSPRO杯数学建模 B题 流行音乐发展简史 原题再现&#xff1a; 随着互联网的发展&#xff0c;流行音乐的主要传播媒介从传统的电台和唱片逐渐过渡到网络下载和网络电台等。网络电台需要根据收听者的已知喜好&#xff0c;自动推荐并播放其它音乐。由于每个人喜好…

乐校园二手书交易管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)大学生闲置二手书在线销售

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读300套最新项目持续更新中..... 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含ja…

蓝桥杯相关算法学习(Python)

一、排序 排序算法是指将一组数据按照某种规则重新排列&#xff0c;使得数据呈现出递增或递减的顺序。常见的排序算法包括冒泡排序、选择排序、插入排序、快速排序、归并排序、堆排序等。 1.冒泡排序 解释&#xff1a; 冒泡排序通过不断交换相邻两个元素的位置&#xff0c;使…

Redis从入门到精通(四)Redis实战:短信登录

文章目录 前言第4章 Redis实战&#xff1a;短信登录4.1 基于session实现短信登录4.1.1 短信登录逻辑梳理4.1.2 创建测试项目4.1.3 实现发送短信验证码功能4.1.4 实现用户登录功能4.1.5 实现登录拦截功能4.1.6 session共享问题 4.2 基于Redis实现短信登录4.2.1 Key-Value的结构设…

mysql语句学习

SQL Select语句完整的执行顺序&#xff1a; 1、from子句组装来自不同数据源的数据&#xff1b; &#xff08;先join在on&#xff09; 2、where子句基于指定的条件对记录行进行筛选&#xff1b; 3、group by子句将数据划分为多个分组&#xff1b; 4、使用聚集函数进行计算&a…

取证之内存取证工具Volatility学习

一、简介 Volatility是一款开源的内存取证分析工具&#xff0c;支持Windows&#xff0c;Linux&#xff0c;MaC&#xff0c;Android等多类型操作系统系统的内存取证方式。该工具是由python开发的&#xff0c;目前支持python2、python3环境。 二、安装 1、下载地址 GitHub - …

搭建 Qt 开发环境

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;QT❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、QT SDK 的下载和安装 1.QT SDK 的下载 二、QT SDK的安装 1、找到下载的文件并双击 2、双击之…

Gatekeep AI:文本转视频教学工具,开启智能学习新纪元

在当今的数字时代,技术的进步不断改变着我们学习和理解知识的方式。 Gatekeep AI 就是这样一款令人兴奋的工具,它专注于将数学和物理问题通过文本提示转化为生动的视频。 特点与优势: 直观的可视化:将复杂的数学和物理概念以直观的视频形式呈现。快速生成:根据用户提供的…

IT公司管理者日常工作思考

一、前言 作为IT公司的管理者,我们应该一切从实际出发,理论和实际相结合,以终为始,带领公司(组织)不断前进。当然前进包括稳重求进,稳步前进,积极扩张,厚积薄发。等等。大多数公司追求的都是稳中求进,没有稳的进都是在冒比较大的风险。积极扩张,又容易出现较大的风…

世优科技上榜2024年度《中国虚拟数字人影响力指数报告》

日前&#xff0c;第三期《中国虚拟数字人影响力指数报告》在中国网络视听大会上正式发布。本期《报告》由中国传媒大学媒体融合与传播国家重点实验室&#xff08;以下简称“国重实验室”&#xff09;、中国传媒大学数字人研究院编制&#xff0c;中国网络视听协会、人民日报智慧…

数据库加载驱动问题(java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver)

java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver 遇到此问题&#xff0c;首先检查IDEA外部库中是否有mysql数据库驱动。如下所示&#xff1a; 如果发现外部库中存有mysql数据库驱动&#xff0c;需要在数据库配置文件中查看是否设置有时区mysql8.0以上版本需要设…

SAD法(附python实现)和Siamese神经网络计算图像的视差图

1 视差图 视差图&#xff1a;以左视图视差图为例&#xff0c;在像素位置p的视差值等于该像素在右图上的匹配点的列坐标减去其在左图上的列坐标 视差图和深度图&#xff1a; z f b d z \frac{fb}{d} zdfb​ 其中 d d d 是视差&#xff0c; f f f 是焦距&#xff0c; b b…

【漏洞复现】用友NC-Cloud系统queryRuleByDeptId存在SQL注入漏洞

“ 如棠安全的技术文章仅供参考&#xff0c;此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的…

vue 实现的h5 页面,如何设置页面中的 title

修改页面中的title 公共修改方式在App.vue 中&#xff1a; created() {document.title "测试标题"; },单个页面修改&#xff0c;就在单个页面编写就ok

提高 API 性能的小技巧

引言 随着数字时代的到来&#xff0c;API&#xff08;应用程序接口&#xff09;已经成为连接不同服务和应用的桥梁&#xff0c;其意义远超技术工具本身。随着大数据、云服务和 5G 技术等领域的进步&#xff0c;API 的作用变得更加重要&#xff0c;它不仅促进了数字转型的发展&…