Badge add count slot

This commit is contained in:
梁灏 2019-09-05 11:17:05 +08:00
parent 91806ae7f5
commit ed0817359c
3 changed files with 25 additions and 4 deletions

View file

@ -20,10 +20,14 @@
<Badge :count="0" showZero>
<a href="#" class="demo-badge"></a>
</Badge>
<Badge>
<Icon type="md-time" slot="count" size="16" color="#ff6600" />
<a href="#" class="demo-badge"></a>
</Badge>
<Button @click="setCount">set count</Button>
<br><br>
<Badge text="hot">
<Button type="ghost">Hello</Button>
<Button type="primary" ghost>Hello</Button>
</Badge>
<br><br>
<div>
@ -91,4 +95,4 @@
}
}
};
</script>
</script>

View file

@ -9,7 +9,8 @@
</span>
<span v-else :class="classes" ref="badge">
<slot></slot>
<sup v-if="hasCount" :style="styles" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
<sup v-if="$slots.count" :style="styles" :class="customCountClasses"><slot name="count"></slot></sup>
<sup v-else-if="hasCount" :style="styles" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
</span>
</template>
<script>
@ -68,6 +69,15 @@
}
];
},
customCountClasses () {
return [
`${prefixCls}-count`,
`${prefixCls}-count-custom`,
{
[`${this.className}`]: !!this.className,
}
];
},
statusClasses () {
return [
`${prefixCls}-status-dot`,

View file

@ -27,6 +27,13 @@
z-index: 10;
box-shadow: 0 0 0 1px #fff;
&-custom{
background: transparent;
color: inherit;
border-color: transparent;
box-shadow: none;
}
a,
a:hover {
color: #fff;
@ -132,4 +139,4 @@
transform: scale(2.4);
opacity: 0;
}
}
}