源码
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 Badge标记的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
Element-UI 使用手册文档 V2.4.6 (Vue版本) 致谢 开发指南 安装 快速上手 国际化 自定义主题 内置过渡动画 Basic 基本组件 ...Badge 标记 Notice 通知组件 Alert 警告 Loading 加载 Me
真心分享给大家,android各种标记,只有你想不到没有你找不到 下载包中含 效果图 简述含的效果:图片右上角带圈圈的数字,标记显示时添加了动画,不同样式的带圈圈的数字,点击显示的标记,点击递增的标记,tabhost...
一个极简的Shields badge服务,使用PHP搭建,代码非常简单,只有60行不到,但是提供了完善,高效率,稳定的Shields badge服务。...可以用于项目状态,标记,内部项目的一些状态标记等等。 标签:Simple
纸质徽章> 是一种圆形文本标记,显示在元素的右上角,表示状态或通知。 它将标记在for属性中指定的锚元素,或者如果不存在,则将其居中到包含它的父节点的中心。 请参阅:, 。用法安装npm install --save @polymer/...
备注更新旧式徽章标记 将旧徽章标记更新为现代约定 目录 用法 安装 $ npm install @form8ion/remark-update-legacy-badge-markers --save-prod 例子 进口 import fs from 'fs' ; import remark from 'remark' ; ...
制作徽章 创建保险证章创建一个代码覆盖率徽章,如下所示: ...选项--output-path <path> 将coverage标记写入给定路径(相对于项目根目录)。 默认为./coverage/badge.svg 。--report-path <path> 覆盖率报告文件的路
vue-element-admin-4.4.0.zip
Jacoco Coverage Badge Maven插件 查阅Wiki了解更多信息: : 内容 产品特点 自动读取jacoco.csv报告并在本地生成报告 可以集成为构建过程的一部分 根据jacoco报告的覆盖率自动设置彩色徽章 可配置的徽章钥匙 从...
React动态徽章 如果字符串数组溢出父元素,则显示标记的响应组件。 技术文档 -安装$ npm install react-dynamic-badge出口默认导出为<DynamicBadge> 。 以下是如何使用它: import { DynamicBadge } from 'react-...
of_badge_gen是faas函数,用于为opendfaas-cloud中部署的函数生成状态标记 徽章 地位 成功部署 待部署 部署失败 内部问题/未知 快速开始 ./deploy.sh 需要安装faas-cli 在您的openfaas-cloud中进行部署 分叉此...
下面的屏幕截图可以标记为: 添加您的输入数据。 将盾牌作为渲染图像查看。 查看并复制屏蔽作为markdown文本。 开启网路应用程式 开始为您的文档创建徽章。 如何使用 导航到页面。 填一张表格。 按Enter或单击...
gh-badges, 转到徽章/屏蔽特别是如果你不知道为什么 ( 这里 repo 是旧的) 屏蔽 第三方代码服务的简明&简明状态标记解决方案。在这里制作你自己的徽章 。 !使用屏蔽标准的服务代码Coverallsgemfury/rubygems插件...
:high_voltage: 流量到Badge GitHub Action |GitHub操作,使用存储库的Insights/traffic数据生成包含视图和克隆的证章。 注意:徽章会计算在traffic_branch中备份的所有流量数据,其中只有最近2周的数据是官方流量...
badge2015 2015年Crypto和Privacy Village徽章的硬件,固件和文档常见问题问:如何构建固件? 答:固件是通过Energia(用于MSP430的Arduino端口)构建的。 您需要将对MSP430G2955的支持添加到Energia。 我们使用了此...
在任何View中加入各种样式的badge,比如在按钮上、tab上、列表上等等。可以动态加入badge,加入badge时可以添加动画效果。Badge也支持点击。可以自定义badge的外观,包括边框、颜色、大小等等。
语言:English 当您访问白域列表中的网站时,此扩展程序会在浏览器操作图标...之后,当您访问白名单中的网站时,Chrome浏览器的右上角会显示带有绿色徽章的图标(标记为“确定”),否则,只会显示没有绿色徽章的图标。
当您希望在标题标记或描述中输入适当数量的字符时,它从一个管理屏幕的形式计数,并在徽章中显示它。 徽章中的字符数只能从开头显示最多4个字符,带有Chrome。 如果Prafge字符小或4位或更多字符,请单击图标以放大...
从zeit.co/account删除烦人的“1”标记。 支持语言:English