`
hereson
  • 浏览: 1450896 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

badge标记

 
阅读更多
源码
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中,Badge(标记)是一个小巧但实用的组件,常用于显示通知数量、状态提示等。本文将深入探讨Element Badge的使用方法,包括基础用法、最大值设定、自定义内容以及小红点模式。 ### 基础用法 Element ...

    Element-UI 使用手册文档 V2.4.6 (Vue版本).pdf

    Element-UI 使用手册文档 V2.4.6 (Vue版本) 致谢 开发指南 安装 快速上手 国际化 自定义主题 内置过渡动画 Basic 基本组件 ...Badge 标记 Notice 通知组件 Alert 警告 Loading 加载 Me

    android badge 图片带标记

    真心分享给大家,android各种标记,只有你想不到没有你找不到 下载包中含 效果图 简述含的效果:图片右上角带圈圈的数字,标记显示时添加了动画,不同样式的带圈圈的数字,点击显示的标记,点击递增的标记,tabhost...

    UIButton+Badge.zip

    在iOS开发中,UIButton是苹果提供的一个基础控件,用于创建和处理用户交互的按钮。然而,有时我们可能需要在按钮上...这个压缩包是iOS开发中实用的代码片段,对于那些需要在按钮上显示未读标记或计数的场景非常有用。

    ElementUI v2.15 使用手册.pdf

    - **其他常用组件**:包含Progress进度条、Tree树形控件、Pagination分页、Badge标记、Avatar头像、Alert警告、Loading加载、Message消息提示、MessageBox弹框、Notification通知、NavMenu导航菜单、Tabs标签页、...

    ElementUI v2.13 使用手册.pdf

    6. **Badge 标记**:用于展示小红点等标记。 7. **Avatar 头像**:用于展示用户的头像或标识。 #### 导航组件 1. **NavMenu 导航菜单**:用于展示主菜单项。 2. **Tabs 标签页**:用于切换不同的内容区域。 3. **...

    PyPI 官网下载 | cdk-codepipeline-badge-notification-2.0.20.tar.gz

    这个库的名称暗示了它可能与AWS CDK(Cloud Development Kit)和CodePipeline服务有关,同时也涉及到了构建过程中的可视化标记——badge,以及通知功能。下面我们将深入探讨这个库的核心功能、应用场景及使用方法。 ...

    TabLayout标题右上角加数字标记

    `TabLayout`的标题右上角添加数字标记是一种常见的需求,这可以用来指示用户有未读的消息或者更新等。在本篇文章中,我们将深入探讨如何实现这一功能。 首先,我们了解`TabLayout`的基本使用。`TabLayout`是`...

    67.小纸条列表组件开发 uni-badge

    小纸条列表组件开发 uni-badge" 涉及的主要知识点是使用 Uni-app 进行小纸条列表组件的构建,其中 Uni-badge 是一个关键的 UI 组件,常用于显示提示信息或者标记状态。下面将详细阐述 Uni-app 的核心概念以及如何...

    安卓Android源码——标记view.zip

    ViewBadger是一个流行的Android库,它简化了在Android应用中对各种View添加徽章(badge)或标记的过程。徽章通常用于表示通知、未读消息或其他重要状态。在没有这个库的情况下,开发者需要手动处理布局、绘制和动画...

    极简的Shieldsbadge服务Simple-Shields.zip

    一个极简的Shields badge服务,使用PHP搭建,代码非常简单,只有60行不到,但是提供了完善,高效率,稳定的Shields badge服务。...可以用于项目状态,标记,内部项目的一些状态标记等等。 标签:Simple

    微信小程序 MinUI组件库系列之badge徽章组件示例

    徽章组件用于在界面上显示数字标记,通常用于未读消息数、红点提醒等场景。在MinUI中,使用徽章组件可以快速实现这些功能,提高开发效率。 MinUI组件库的安装和初始化过程如下:首先,使用npm命令安装Min-Cli工具,...

    paper-badge:元素的材料设计状态描述符

    纸质徽章&gt; 是一种圆形文本标记,显示在元素的右上角,表示状态或通知。 它将标记在for属性中指定的锚元素,或者如果不存在,则将其居中到包含它的父节点的中心。 请参阅:, 。用法安装npm install --save @polymer/...

    remark-update-legacy-badge-markers:备注插件,用于将旧式徽章标记更新为现代区域约定

    备注更新旧式徽章标记 将旧徽章标记更新为现代约定 目录 用法 安装 $ npm install @form8ion/remark-update-legacy-badge-markers --save-prod 例子 进口 import fs from 'fs' ; import remark from 'remark' ; ...

    acd_badge_test

    标题“acd_badge_test”可能指的是一个与ACD(可能是某个组织、软件或项目的缩写)相关的徽章测试项目。由于没有提供详细的描述,我们只能根据标签“HTML”来推测这个项目的内容。HTML(HyperText Markup Language)...

    make-coverage-badge:创建保险证章

    制作徽章 创建保险证章创建一个代码覆盖率徽章,如下所示: ...选项--output-path &lt;path&gt; 将coverage标记写入给定路径(相对于项目根目录)。 默认为./coverage/badge.svg 。--report-path &lt;path&gt; 覆盖率报告文件的路

    sb-hide-nitro-badge

    这个项目可能是针对PHP编程语言的一个解决方案,用于帮助开发者或网站管理员在他们的网页上去除这些标记。 在PHP中,我们可以从多个角度理解这个主题。首先,PHP是一种广泛使用的服务器端脚本语言,特别适合创建...

    jacoco-cov-badge-maven-plugin:作为构建的一部分,从jacoco报告本地生成高质量的SVG,PNG和JPG Coverage标记

    Jacoco Coverage Badge Maven插件 查阅Wiki了解更多信息: : 内容 产品特点 自动读取jacoco.csv报告并在本地生成报告 可以集成为构建过程的一部分 根据jacoco报告的覆盖率自动设置彩色徽章 可配置的徽章钥匙 从...

    zeit badge off-crx插件

    这款插件主要针对英语用户,其目的是帮助用户消除zeit.co/account页面上的通知标记,提供一个更清爽、无干扰的浏览体验。 **浏览器扩展程序基础** 浏览器扩展程序是基于浏览器的一种应用程序,它们可以增强或修改...

Global site tag (gtag.js) - Google Analytics