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。

组件使用如下:

展示效果如下:

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

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

相关文章

AIGC之gradio系列学习教程(二)Components

简述: 让我们继续了解一下 Gradio 的一些主要功能。本指南旨在对构建演示时应注意的各种事项进行高级概述。 Components Gradio 包含 30 多个预构建组件(以及许多用户构建的自定义组件),只需一行代码即可在演示中用作输入或输出。这些组件对应于机器学习和数据科学中的常…

C++初学者:如何优雅地写程序

我喜欢C语言的功能强大&#xff0c;简洁&#xff0c;我也喜欢C#的语法简单&#xff0c;清晰&#xff0c;写起来又方便好用。 一、为什么不用C语言写程序。 C语言用来做题目&#xff0c;考试研究是很方便的&#xff0c;但是用来写程序做软件&#xff0c;你就会发现&#xff0c…

解决Centos7无法连接网络和访问网页连接不上问题

一、网络无法连接问题 网络无法连接的问题我查到了一个很良心的操作&#xff0c;不用重装&#xff0c;因为可能是你虚拟机设置上的问题。我先写我的解决方案&#xff0c;再附上其他几种解决方案。 问题一&#xff1a; 虚拟机的问题****加粗样式 解决&#xff1a; &#xff08;…

landsat8数据产品说明

1、下载数据用户手册 手册下载网址&#xff0c;搜索landsat science关键词&#xff0c;并点击到官网下载。 2、用户手册目录 3、landsat8数据产品说明 具体说明在手册的第四章&#xff0c;4.1.4数据产品章节&#xff0c;具体描述如下&#xff1a; 英文意思&#xff1a; L8 的…

Plesk环境中签发免费SSL证书的操作与成效

在过去的一段时间内&#xff0c;我专注于在Plesk控制面板环境中为多个网站成功签发免费SSL证书&#xff0c;确保了这些站点的安全传输和用户数据保护。以下是对这一工作的全面总结&#xff0c;包括突出的工作亮点、具体实施过程、取得的成绩以及下一阶段的工作规划。 一、工作亮…

【C++】新的类功能和可变参数模板

目录 一、新的类功能1.1 默认成员函数1.1.1 移动构造函数1.1.2 移动赋值运算符重载 1.2 关键字default1.3 关键字delete 二、可变参数模板2.1 可变参数的函数模板2.2 递归方式展开函数2.3 empalce 一、新的类功能 1.1 默认成员函数 在之前的学习过程中&#xff0c;我们已经知…

走进车厂 | 移远通信以前沿车载技术,照亮智能网联汽车产业创新发展之路

无钥匙自动解锁方便快捷、实时路况导航精准高效、语音指令轻松控制车辆、车载娱乐系统丰富多样……随着智能化、数字化浪潮的不断推进&#xff0c;现如今的汽车出行焕然一新。 正如我们所见&#xff0c;汽车产业正在经历前所未有的变革。物联网、车联网等前沿技术的发展和应用&…

反弹shell的方法和场景

Netcat反弹Shell 1 NC正向反弹shell Netcat简称NC,是一个简单、可靠的网络工具,被誉为网络界的瑞士军刀。通NC可以进行端口扫描、 反弹Shell、端口监听和文件传输等操作,常用参数如下&#xff1a; -c指定连接后要执行的shell命令-e指定连接后要执行的文件名-k配置 Socket一…

C语言指针 深入浅出讲解

指针在我的理解就是一个指向值的地址&#xff0c;地址是连续的&#xff0c;比如这个&#xff1a; 我写了一个数组&#xff0c;分别赋值4&#xff0c;5&#xff0c;6...11&#xff1b; 它们的地址分别如下&#xff1a; 可以看到地址增长是4&#xff0c;这是因为&#xff0c;地…

C++其他语法..

1.运算符重载 之前有一个案例如下所示 其中我们可以通过add方法将两个点组成一个新的点 class Point {friend Point add(Point, Point);int m_x;int m_y; public:Point(int x, int y) : m_x(x), m_y(y) {}void display() {cout << "(" << m_x <<…

Codigger Desktop:开发者的利器,每个人的好帮手(一)

在当今这个信息化、数字化的时代&#xff0c;开发者们面临着前所未有的挑战和机遇。为了更好地助力开发者们应对这些挑战&#xff0c;抓住机遇&#xff0c;Codigger应运而生。其中Codigger Desktop 是一款基于 Codigger 系统的桌面应用&#xff0c;为用户提供直观易用的操作界面…

LEAP模型的能源环境发展、碳排放建模预测及不确定性分析教程

原文链接&#xff1a;LEAP模型的能源环境发展、碳排放建模预测及不确定性分析教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247599754&idx4&sn243c9f8bff355235a7056c2cbb1331fa&chksmfa82076dcdf58e7b871c3369c95ead9ff1d90baa0431318b26b6abd27…

Pytorch for training1——read data/image

blog torch.utils.data.Dataset create dataset with class torch.utils.data.Dataset automaticly import torch from torch.utils.data import Datasetclass MyDataset(Dataset):def __init__(self, data):self.data datadef __getitem__(self, index):# 根据索引获取样本…

关于跑yolov5.6.1项目的一些错误情况的记录

&#xff08;1&#xff09; 错误问题一&#xff1a;TypeError: meshgrid() got multiple values for keyword argument ‘indexing’ 1.1解决方案&#xff1a;点击图片中黄色部分所在位置的文件&#xff0c;删除indexing“ij” (2)错误问题二&#xff1a;AttributeError: ‘F…

是否应该升级到ChatGPT 4.0?深度对比ChatGPT 3.5与4.0的差异

如果只是想简单地体验AI的魅力&#xff0c;感受大模型的独特之处&#xff0c;或是玩一玩文字游戏&#xff0c;那么升级至ChatGPT 4.0可能并非必需。然而&#xff0c;若你期望将AI作为提升工作学习效率的得力助手&#xff0c;那么我强烈建议你升级到ChatGPT 4.0。 如果你不知道…

【Springboot整合系列】SpringBoot整合WebService

目录 Web服务介绍Web服务的两种类型Web服务架构Web服务的主要特点Web服务使用场景Web服务标准和技术 WebService介绍WebService的作用适用场景不适用场景 WebService的原理三个角色相关概念 WebService开发框架代码实现服务端1.引入依赖2.实体类3.业务层接口接口实现类 4.配置类…

活动回顾丨掘金海外,探寻泛娱乐社交APP出海新风口

3月中旬,Flat Ads携手声网、XMP在广州成功举办“泛娱乐社交APP出海新风口——广州站”的主题线下沙龙活动。 多位大咖与泛娱乐社交APP赛道的行业伙伴汇聚一堂。本次活动邀请到Flat Ads 市场VP 王若策、声网娱乐视频产品负责人 陈际陶、XMP资深产品运营专家 屈俊星等多位行业大…

python ---- %r %s格式输出的区别

在python中&#xff0c; % s和 % r是我们常用的格式符&#xff0c;它们的用法基本一致&#xff0c;但作用却不尽相同&#xff0c;下面简要说明一下两者的区别&#xff1a; 1. % s是将对象 / 变量传递到str()方法中&#xff0c;并将其转化为面向用户的可阅读的格式。 2. % r是将…

ARM 寄存器学习:(前言)七种模式\异常源\向量表\异常返回

一、ARM的七种工作模式 Arm微处理器支持7种工作模式&#xff0c;分别为&#xff1a; 1&#xff0e; 用户模式&#xff08;Usr&#xff09; 用于正常执行程序 2&#xff0e; 系统模式&#xff08;sys&#xff09; 运行均有特权的操作系统任务 3&#…

既然有 HTTP 协议,为什么还要有 RPC?(计算机网络)

使用纯裸 TCP 会有什么问题 TCP 是有三个特点&#xff0c;面向连接、可靠、基于字节流。这里我们需要关注的是基于字节流这一点。 字节流可以理解为一个双向的通道里流淌的数据&#xff0c;这个数据其实就是我们常说的二进制数据&#xff0c;简单来说就是一大堆 01 串。纯裸 T…