You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
3.3 KiB
129 lines
3.3 KiB
<template>
|
|
<span :class="badgeComputedCls.badgeCls">
|
|
<template v-if="isStatusBadge">
|
|
<span :class="badgeComputedCls.statusCls"></span>
|
|
<span :class="[prefixCls+'-status-text']">{{text}}</span>
|
|
</template>
|
|
<template v-else>
|
|
<slot></slot><transition appear :name="transitionName">
|
|
<scroll-number
|
|
v-if="!badgeStatus.isHidden"
|
|
:prefixCls="scrollNumberPrefixCls"
|
|
:className="badgeComputedCls.scrollNumberCls"
|
|
:count="badgeStatus.stateCount"
|
|
:titleNumber="count"
|
|
:styleNumber="styles"
|
|
>
|
|
</scroll-number>
|
|
</transition>
|
|
<span
|
|
v-if="!badgeStatus.isHidden && text"
|
|
:class="[prefixCls+'-status-text']">
|
|
{{text}}
|
|
</span>
|
|
</template>
|
|
</span>
|
|
</template>
|
|
<script>
|
|
import Icon from '../icon'
|
|
import ScrollNumber from './ScrollNumber'
|
|
|
|
export default {
|
|
name: 'Badge',
|
|
props: {
|
|
prefixCls: {
|
|
type: String,
|
|
default: 'ant-badge',
|
|
},
|
|
scrollNumberPrefixCls: {
|
|
type: String,
|
|
default: 'ant-scroll-number',
|
|
},
|
|
count: {
|
|
type: [Number, String],
|
|
},
|
|
overflowCount: {
|
|
type: [Number, String],
|
|
default: 99,
|
|
},
|
|
showZero: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
dot: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
status: {
|
|
validator: (val) => {
|
|
if (!val) return true
|
|
return ['success', 'processing', 'default', 'error', 'warning'].includes(val)
|
|
},
|
|
default: '',
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
styles: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
},
|
|
data () {
|
|
const { prefixCls, $slots } = this
|
|
const isHasDefaultSlot = $slots && !!$slots.default
|
|
return {
|
|
isHasDefaultSlot,
|
|
transitionName: isHasDefaultSlot ? `${prefixCls}-zoom` : '',
|
|
}
|
|
},
|
|
computed: {
|
|
isStatusBadge () {
|
|
const { isHasDefaultSlot, status } = this
|
|
return !isHasDefaultSlot && status
|
|
},
|
|
badgeComputedCls () {
|
|
const { prefixCls, isHasDefaultSlot, status, dot, count } = this
|
|
const isDot = dot || status
|
|
return {
|
|
badgeCls: {
|
|
[`${prefixCls}`]: true,
|
|
[`${prefixCls}-status`]: !!status,
|
|
[`${prefixCls}-not-a-wrapper`]: !isHasDefaultSlot,
|
|
},
|
|
statusCls: {
|
|
[`${prefixCls}-status-dot`]: !!status,
|
|
[`${prefixCls}-status-${status}`]: !isHasDefaultSlot,
|
|
},
|
|
scrollNumberCls: {
|
|
[`${prefixCls}-dot`]: isDot,
|
|
[`${prefixCls}-count`]: !isDot,
|
|
[`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
|
|
[`${prefixCls}-status-${status}`]: !isHasDefaultSlot,
|
|
},
|
|
}
|
|
},
|
|
badgeStatus () {
|
|
const { count, overflowCount, showZero, dot, text } = this
|
|
let stateCount = +count > +overflowCount ? `${overflowCount}+` : count
|
|
const isDot = dot || text
|
|
if (isDot) {
|
|
stateCount = ''
|
|
}
|
|
const isZero = stateCount === '0' || stateCount === 0
|
|
const isEmpty = stateCount === null || stateCount === undefined || stateCount === ''
|
|
const isHidden = (isEmpty || (isZero && !showZero)) && !isDot
|
|
return {
|
|
stateCount,
|
|
isHidden,
|
|
}
|
|
},
|
|
},
|
|
components: {
|
|
Icon,
|
|
ScrollNumber,
|
|
},
|
|
}
|
|
</script>
|