源碼
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>標簽：定義了一個文本區(qū)域菲茬，出于排版的原因铺呵，與主要的文本相比，應該展示得更高并且更小
詳情點這里
<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的插槽的節(jié)點，vue.$slot.default 為未包含在具名插槽中的節(jié)點贞盯。
第二是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>
