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…

STC8H8K64U 学习笔记 - 基础代码

STC8H8K64U 学习笔记 - 基础代码 环境说明引脚说明 基础代码电动马达蜂鸣器小蓝灯LED 灯走马灯来回灯流水灯流水逐灭灯相遇灯 独立按键 串口串口接收查询按键反馈 环境说明 该内容仅针对我自己学习的开发板做的笔记&#xff0c;在实际开发中需要针对目标电路板的原理图进行针对…

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

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

Pandas处理缺省数据

背景&#xff1a; SQL查询数据为空或者null的字段&#xff0c;如果查询字段为或者NULL需要设置为NULL 解决方案&#xff1a; 只处理指定字段 在 Pandas 中处理缺失数据&#xff08;如 SQL 查询结果中的空字符串或 NULL 值&#xff09;可以通过 fillna() 方法来实现。您可以将…

玩机进阶教程-----高通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的结构设…

【华为OD机试】欢乐的周末(并查集和搜索算法—JavaPythonC++JS实现)

本文收录于专栏:算法之翼 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解代码C/C++题解代码JS题解代码四.代码讲解(Ja…

mysql语句学习

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

优化网络体验:代理IP在提升网页浏览速度和安全性方面的实践

代理IP在提升网络体验&#xff0c;特别是网页浏览速度和安全性方面&#xff0c;具有显著作用。以下是代理IP在这两方面实践应用的详细说明&#xff1a; 一、提升网页浏览速度 1. 缓存加速 许多代理服务器具备缓存功能&#xff0c;它们会对之前请求过的网页内容进行存储。当后续…

postgresql 表、索引的膨胀率监控

表膨胀监控 /* WARNING: executed with a non-superuser role, the query inspect only tables and materialized view (9.3) you are granted to read. * This query is compatible with PostgreSQL 9.0 and more */ SELECT current_database(), schemaname, tblname, bs*tbl…

取证之内存取证工具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 就是这样一款令人兴奋的工具,它专注于将数学和物理问题通过文本提示转化为生动的视频。 特点与优势: 直观的可视化:将复杂的数学和物理概念以直观的视频形式呈现。快速生成:根据用户提供的…

菜鸟笔记-Python函数-ones

在Python中&#xff0c;ones函数通常是与NumPy库一起使用的&#xff0c;用于生成一个全为1的数组。NumPy是Python中用于处理数组、矩阵和数学函数运算的强大库。 1. 函数介绍 numpy.ones函数用于生成一个给定形状和类型的新数组&#xff0c;其元素全部初始化为1。 函数的基本…

mysql闲谈

如何定位慢查询 1、测试环境压测时&#xff0c;有的接口非常慢&#xff0c;响应时间超过2秒以上。当时系统部署了运维的监控系统Skywalking&#xff0c;在展示报表中可以看到是哪儿个接口慢&#xff0c;可以看到SQL具体执行时间。 2、如果没有类似的监控系统&#xff0c;在Mysq…