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>

需要注意的地方：

1. <sup>标签：定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小
   详情点这里

<p>This text is <sup>superscripted</sup></p>

以上代码显示：

2. :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>