54 lines
1.0 KiB
Vue
54 lines
1.0 KiB
Vue
<template>
|
|
<div class="el-badge">
|
|
<slot></slot>
|
|
<transition name="el-zoom-in-center">
|
|
<sup
|
|
v-show="!hidden && (content || content === 0 || isDot)"
|
|
v-text="content"
|
|
class="el-badge__content"
|
|
:class="[
|
|
'el-badge__content--' + type,
|
|
{
|
|
'is-fixed': $slots.default,
|
|
'is-dot': isDot
|
|
}
|
|
]">
|
|
</sup>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ElBadge',
|
|
|
|
props: {
|
|
value: [String, Number],
|
|
max: Number,
|
|
isDot: Boolean,
|
|
hidden: Boolean,
|
|
type: {
|
|
type: String,
|
|
validator(val) {
|
|
return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
|
|
}
|
|
}
|
|
},
|
|
|
|
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>
|