源码
mian.vue
<template>
<div class="el-badge">
<slot></slot>
<transition name="el-zoom-in-center">
<sup
v-show="!hidden && ( content || isDot )"
v-text="content"
class="el-badge__content"
:class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
</sup>
</transition>
</div>
</template>
<script>
export default {
name: 'ElBadge',
props: {
value: {},
max: Number,
isDot: Boolean,
hidden: Boolean
},
computed: {
content() {
if (this.isDot) return; // 如果isDot为true,显示为点,直接return undefined;
const value = this.value;
const max = this.max;
if (typeof value === 'number' && typeof max === 'number') { // 如果value和max的类型为number才进行比较
return max < value ? `${max}+` : value; // 显示不大于max的value,或者max
}
return value; // 如果value或者max的类型不是number,直接返回value
}
}
};
</script>
需要注意的地方:
<sup>标签:定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更高并且更小
详情点这里
<p>This text is <sup>superscripted</sup></p>
以上代码显示:
:class="{ 'is-fixed': $slots.default, 'is-dot': isDot }"
以上代码还有两点知识:
第一是slot,vue.$slots用来访问插槽内容,vue.$slots.slot_name用来访问插槽名为slot_name的插槽的节点,vue.$slot.default 为未包含在具名插槽中的节点。
第二是class的对象语法,'is_fixed'这个class是否存在,决定于$slot.default的truthiness
。Truthy(真值)指的是在Boolean上下文中转换后的值为真的值。上面$slot.default为类数组,转换为boolean后为true。
所以在<el-badge>标签内有元素,比如<el-button>标记会在右上角;如果没有元素,则显示在旁边,如下图。
评论按钮的代码:<el-badge :value="12" class="item"><el-button size="small">评论</el-button></el-badge>
评论下拉框的代码: <el-dropdown-item class="clearfix">评论<el-badge class="mark" :value="12" /></el-dropdown-item>
分享到:
相关推荐
在Element UI中,Badge(标记)是一个小巧但实用的组件,常用于显示通知数量、状态提示等。本文将深入探讨Element Badge的使用方法,包括基础用法、最大值设定、自定义内容以及小红点模式。 ### 基础用法 Element ...
Element-UI 使用手册文档 V2.4.6 (Vue版本) 致谢 开发指南 安装 快速上手 国际化 自定义主题 内置过渡动画 Basic 基本组件 ...Badge 标记 Notice 通知组件 Alert 警告 Loading 加载 Me
真心分享给大家,android各种标记,只有你想不到没有你找不到 下载包中含 效果图 简述含的效果:图片右上角带圈圈的数字,标记显示时添加了动画,不同样式的带圈圈的数字,点击显示的标记,点击递增的标记,tabhost...
在iOS开发中,UIButton是苹果提供的一个基础控件,用于创建和处理用户交互的按钮。然而,有时我们可能需要在按钮上...这个压缩包是iOS开发中实用的代码片段,对于那些需要在按钮上显示未读标记或计数的场景非常有用。
- **其他常用组件**:包含Progress进度条、Tree树形控件、Pagination分页、Badge标记、Avatar头像、Alert警告、Loading加载、Message消息提示、MessageBox弹框、Notification通知、NavMenu导航菜单、Tabs标签页、...
6. **Badge 标记**:用于展示小红点等标记。 7. **Avatar 头像**:用于展示用户的头像或标识。 #### 导航组件 1. **NavMenu 导航菜单**:用于展示主菜单项。 2. **Tabs 标签页**:用于切换不同的内容区域。 3. **...
这个库的名称暗示了它可能与AWS CDK(Cloud Development Kit)和CodePipeline服务有关,同时也涉及到了构建过程中的可视化标记——badge,以及通知功能。下面我们将深入探讨这个库的核心功能、应用场景及使用方法。 ...
`TabLayout`的标题右上角添加数字标记是一种常见的需求,这可以用来指示用户有未读的消息或者更新等。在本篇文章中,我们将深入探讨如何实现这一功能。 首先,我们了解`TabLayout`的基本使用。`TabLayout`是`...
小纸条列表组件开发 uni-badge" 涉及的主要知识点是使用 Uni-app 进行小纸条列表组件的构建,其中 Uni-badge 是一个关键的 UI 组件,常用于显示提示信息或者标记状态。下面将详细阐述 Uni-app 的核心概念以及如何...
ViewBadger是一个流行的Android库,它简化了在Android应用中对各种View添加徽章(badge)或标记的过程。徽章通常用于表示通知、未读消息或其他重要状态。在没有这个库的情况下,开发者需要手动处理布局、绘制和动画...
一个极简的Shields badge服务,使用PHP搭建,代码非常简单,只有60行不到,但是提供了完善,高效率,稳定的Shields badge服务。...可以用于项目状态,标记,内部项目的一些状态标记等等。 标签:Simple
徽章组件用于在界面上显示数字标记,通常用于未读消息数、红点提醒等场景。在MinUI中,使用徽章组件可以快速实现这些功能,提高开发效率。 MinUI组件库的安装和初始化过程如下:首先,使用npm命令安装Min-Cli工具,...
纸质徽章> 是一种圆形文本标记,显示在元素的右上角,表示状态或通知。 它将标记在for属性中指定的锚元素,或者如果不存在,则将其居中到包含它的父节点的中心。 请参阅:, 。用法安装npm install --save @polymer/...
备注更新旧式徽章标记 将旧徽章标记更新为现代约定 目录 用法 安装 $ npm install @form8ion/remark-update-legacy-badge-markers --save-prod 例子 进口 import fs from 'fs' ; import remark from 'remark' ; ...
标题“acd_badge_test”可能指的是一个与ACD(可能是某个组织、软件或项目的缩写)相关的徽章测试项目。由于没有提供详细的描述,我们只能根据标签“HTML”来推测这个项目的内容。HTML(HyperText Markup Language)...
制作徽章 创建保险证章创建一个代码覆盖率徽章,如下所示: ...选项--output-path <path> 将coverage标记写入给定路径(相对于项目根目录)。 默认为./coverage/badge.svg 。--report-path <path> 覆盖率报告文件的路
这个项目可能是针对PHP编程语言的一个解决方案,用于帮助开发者或网站管理员在他们的网页上去除这些标记。 在PHP中,我们可以从多个角度理解这个主题。首先,PHP是一种广泛使用的服务器端脚本语言,特别适合创建...
Jacoco Coverage Badge Maven插件 查阅Wiki了解更多信息: : 内容 产品特点 自动读取jacoco.csv报告并在本地生成报告 可以集成为构建过程的一部分 根据jacoco报告的覆盖率自动设置彩色徽章 可配置的徽章钥匙 从...
这款插件主要针对英语用户,其目的是帮助用户消除zeit.co/account页面上的通知标记,提供一个更清爽、无干扰的浏览体验。 **浏览器扩展程序基础** 浏览器扩展程序是基于浏览器的一种应用程序,它们可以增强或修改...