Badge add count slot
This commit is contained in:
parent
91806ae7f5
commit
ed0817359c
3 changed files with 25 additions and 4 deletions
|
@ -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>
|
||||
|
|
|
@ -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`,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue