79 lines
2.3 KiB
Vue
79 lines
2.3 KiB
Vue
<template>
|
|
<span v-if="dot" :class="classes" ref="badge">
|
|
<slot></slot>
|
|
<sup :class="dotClasses" v-show="badge"></sup>
|
|
</span>
|
|
<span v-else :class="classes" ref="badge">
|
|
<slot></slot>
|
|
<sup v-if="hasCount" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
|
|
</span>
|
|
</template>
|
|
<script>
|
|
const prefixCls = 'ivu-badge';
|
|
|
|
export default {
|
|
name: 'Badge',
|
|
props: {
|
|
count: [Number, String],
|
|
dot: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
overflowCount: {
|
|
type: [Number, String],
|
|
default: 99
|
|
},
|
|
className: String,
|
|
showZero: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
classes () {
|
|
return `${prefixCls}`;
|
|
},
|
|
dotClasses () {
|
|
return `${prefixCls}-dot`;
|
|
},
|
|
countClasses () {
|
|
return [
|
|
`${prefixCls}-count`,
|
|
{
|
|
[`${this.className}`]: !!this.className,
|
|
[`${prefixCls}-count-alone`]: this.alone
|
|
}
|
|
];
|
|
},
|
|
finalCount () {
|
|
return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;
|
|
},
|
|
badge () {
|
|
let status = false;
|
|
|
|
if (this.count) {
|
|
status = !(parseInt(this.count) === 0);
|
|
}
|
|
|
|
if (this.dot) {
|
|
status = true;
|
|
if (this.count !== null) {
|
|
if (parseInt(this.count) === 0) {
|
|
status = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
return status || this.showZero;
|
|
},
|
|
hasCount() {
|
|
if(this.count) return true;
|
|
if(this.showZero && parseInt(this.count) === 0) return true;
|
|
else return false;
|
|
},
|
|
alone () {
|
|
return this.$slots.default === undefined;
|
|
}
|
|
}
|
|
};
|
|
</script>
|