mirror of https://github.com/ElemeFE/element
42 lines
734 B
Vue
42 lines
734 B
Vue
<template>
|
|
<div class="el-badge">
|
|
<slot></slot>
|
|
<transition name="el-zoom-in-center">
|
|
<sup
|
|
v-show="!hidden"
|
|
v-text="content"
|
|
class="el-badge__content"
|
|
:class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
|
|
</sup>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'el-badge',
|
|
|
|
props: {
|
|
value: {},
|
|
max: Number,
|
|
isDot: Boolean,
|
|
hidden: Boolean
|
|
},
|
|
|
|
computed: {
|
|
content() {
|
|
if (this.isDot) return;
|
|
|
|
const value = this.value;
|
|
const max = this.max;
|
|
|
|
if (typeof value === 'number' && typeof max === 'number') {
|
|
return max < value ? `${max}+` : value;
|
|
}
|
|
|
|
return value;
|
|
}
|
|
}
|
|
};
|
|
</script>
|