element-ui badge 组件源码分享

news2024/11/25 10:53:08

今日简单分享 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.coloradmin.cn/o/1563641.html

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

相关文章

YPay源支付V7开源版

YPay_V7版本即将停止维护更新&#xff0c;同时我们将开放最新版开源代码供学习和参考。虽然首批阶段的【function_8.1.php文件是加密的】&#xff0c;但授权已经除去&#xff0c;该代码将在新版YPay上线时开放给大家。我们也会定期进行迭代更新&#xff0c;随后将创建对应仓库&…

算法系列--动态规划--背包问题(2)--01背包拓展题目

&#x1f495;"2024.3.28小米汽车发布"&#x1f495; 作者&#xff1a;Lvzi 文章主要内容&#xff1a;算法系列–动态规划–背包问题(2)–01背包拓展题目 大家好,今天为大家带来的是算法系列--动态规划--背包问题(2)--01背包拓展题目 1.分割等和⼦集 链接: https:/…

风险与收益

风险与收益 影响资产需求的主要因素财富总量预期收益率资产的流动性影响流动性的主要因素 风险 如何降低风险系统风险和非系统风险机会集合与有效集合资产组合理论 影响资产需求的主要因素 影响资产需求的主要因素包括&#xff1a;财富总量、预期收益率、资产的流动性和风险。…

虚拟机与开发板之间互传文件、文件夹

1.配置桥接模式实现外网访问 1.1设置 VMnet0 要桥接的网卡 打开【编辑】-【虚拟网络编辑器】 选择【更改设置】 选择【VMnet0】&#xff0c;选择桥接到宿主机上的哪个网卡。 通过打开安装虚拟机的宿主机的【网络适配器】&#xff0c;可以查看网卡名称。 1.2虚拟机配置桥接模式…

支持多元AI场景应用,宁畅“NEX AI Lab”开放试用预约中

3月29日&#xff0c;宁畅在京举行发布会&#xff0c;正式发布“全局智算”战略&#xff0c;并在会上推出战略性新品“AI算力栈”&#xff0c;旨在有效解决大模型产业落地的全周期问题。 据宁畅CTO赵雷介绍&#xff0c;“AI算力栈”集成了宁畅在AI计算领域的软硬件能力&#xff…

Python中os.environ基本介绍及使用方法

文章目录 python中os.environos.environ简介os.environ进行环境变量的增删改查 python中os.environ的使用详解1. 简介2. key 字段详解2.1 常见 key 字段 3. os.environ.get() 用法4. 环境变量的增删改查和判断是否存在4.1 新增环境变量4.2 更新环境变量4.3 获取环境变量4.4 删除…

正大国际:安全合规的外盘期货途径

“外盘期货”一词是指在中国大陆以外建立的期货交易市场。交易所基于国内期货和外盘期货的全球定价、价格权威、巨大的外部交易量、成熟的交易市场和交易机制、强大的流动性、巨大的市场容量、在中国大陆没有控制和强劲的趋势。然而&#xff0c;许多人被引诱进入非法甚至非法平…

【MySQL】DML的表操作详解:添加数据&修改数据&删除数据(可cv例题语句)

前言 大家好吖&#xff0c;欢迎来到 YY 滴MySQL系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C Linux的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…

【数字图像处理】图像的最近邻插值、双线性插值和双三次插值

图像最近邻插值、双线性插值和双三次插值 用 O ( X , Y ) O(X,Y) O(X,Y)表示 H W H\times W HW的原始图像&#xff0c; G ( X ^ , Y ^ ) G(\hat{X},\hat{Y}) G(X^,Y^)表示 H ^ Y ^ \hat{H}\times\hat{Y} H^Y^的目标图像。 最近邻插值 最近邻插值法令目标图像在 ( x ^ , y…

代码随想录-二叉树【从中序与后序遍历序列构造二叉树】

题目 根据一棵树的中序遍历与后序遍历构造二叉树。 注意: 你可以假设树中没有重复的元素。 例如&#xff0c;给出 中序遍历 inorder [9,3,15,20,7]后序遍历 postorder [9,15,7,20,3] 返回如下的二叉树&#xff1a; 思路 首先回忆一下如何根据两个顺序构造一个唯一的二叉…

JavaScript前端学习大全

一、概念 JavaScript简称为JS&#xff0c;这门语言诞生主要用于完成页面的数据验证&#xff0c;因此运行在客户端&#xff0c;需要浏览器来解析JavaScript的代码。是世界上最流行的脚本语言。JavaScript 是一种让网页变得有趣和动态的编程语言。比如&#xff0c;当你在网页上点…

Java的编程之旅44——学生信息管理系统

目录 1.MVC设计模式初探 文件结构的搭建 2.Student类用来初始化学生信息 3.主函数里的两个功能 1.调用初始化学生信息的功能 2.输出欢迎界面功能 4.Global类中方法的编写 5.StuPage类&#xff0c;StuCtrl类&#xff0c;StuModel类中方法的编写 1.查询功能 selStu方法的…

蓝桥杯真题:单词分析

import java.util.Scanner; //1:无需package //2: 类名必须Main, 不可修改 public class Main{public static void main(String[]args) {Scanner sannernew Scanner(System.in);String strsanner.nextLine();int []anew int [26];for(int i0;i<str.length();i) {a[str.charA…

使用vite创建一个react18项目

一、vite是什么&#xff1f; vite 是一种新型前端构建工具&#xff0c;能够显著提升前端开发体验。它主要由两部分组成&#xff1a; 一个开发服务器&#xff0c;它基于原生 ES 模块提供了丰富的内建功能&#xff0c;如速度快到惊人的模块热更新&#xff08;HMR&#xff09;。 …

iOS苹果签名共享签名是什么以及如何获取?

哈喽&#xff0c;大家好呀&#xff0c;咕噜淼淼又来和大家见面啦&#xff0c;最近有很多朋友都来向我咨询共享签名iOS苹果IPA共享签名是什么&#xff0c;针对这个问题&#xff0c;淼淼来解答一下大家的疑惑并告诉大家iOS苹果ipa共享签名需要如何获取。 现在苹果签名在市场上的…

CSS(二)---【常见属性、复合属性使用】

零.前言 本篇文章主要阐述CSS常见属性、复合属性&#xff0c;更多前置知识请见作者其它文章&#xff1a; CSS(一)---【CSS简介、导入方式、八种选择器、优先级】-CSDN博客 1.CSS属性 CSS的属性有上百个&#xff0c;但是我们并不需要全部学习&#xff0c;只要我们学习一部分…

二叉树 - 栈 - 计数 - leetcode 331. 验证二叉树的前序序列化 | 中等难度

题目 - 点击直达 leetcode 331. 验证二叉树的前序序列化 | 中等难度1. 题目详情1. 原题链接2. 基础框架 2. 解题思路1. 题目分析2. 算法原理方法1&#xff1a;栈方法2&#xff1a;计数 3. 时间复杂度 3. 代码实现方法1&#xff1a;栈方法2&#xff1a;计数 leetcode 331. 验证二…

通俗易懂的JMeter调试错误全集

一、前言 在使用jmeter做接口测试的过程中大家是不是经常会遇到很多问题&#xff0c;但是无从下手&#xff0c;不知道从哪里开始找起&#xff0c;对于初学者而言这是一个非常头痛的事情。这里总结出以下方法。 二、通过查看运行日志调试问题 写好脚本后&#xff0c;可以先试…

HarmonyOS实战开发-为应用添加运行时权限

介绍 通过AbilityAccessCtrl动态向用户申请“允许不同设备间的数据交换”的权限&#xff0c;使用设备管理实例获取周边不可信设备列表。 说明&#xff1a; 查询周边不可信设备之前&#xff0c;请确保本设备与周边设备未进行配对。如果已配对&#xff0c;则恢复出厂设置之后重新…

税务知识竞赛活动方案

为了提高税务工作人员的业务技能和知识&#xff0c;现在全市范围开展税务知识竞赛&#xff0c;希望通过“以赛促学”&#xff0c;在税务系统掀起一场税务知识学习热潮。下面是本次竞赛的活动方案。 1、第一轮&#xff1a;争分夺秒。选择题或判断题&#xff0c;每位参赛选手按编…