status: fix css and display status inline with badge

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav 2019-10-13 14:43:27 +05:30
parent ca645361ee
commit 08a5fa81c3

View File

@ -3,10 +3,7 @@
<template slot="title"> <template slot="title">
{{ text }} {{ text }}
</template> </template>
<span> <a-badge style="display: inline-flex" :title="text" :status="getBadgeStatus(text)" :text="getText()" />
<a-badge :title="text" :status="getBadgeStatus(text)" />
<span v-if="displayText">{{ text }}</span>
</span>
</a-tooltip> </a-tooltip>
</template> </template>
@ -31,6 +28,12 @@ export default {
} }
}, },
methods: { methods: {
getText () {
if (this.displayText && this.text) {
return this.text.charAt(0).toUpperCase() + this.text.slice(1)
}
return ''
},
getBadgeStatus (state) { getBadgeStatus (state) {
var status = 'default' var status = 'default'
switch (state) { switch (state) {
@ -74,6 +77,6 @@ export default {
/deep/ .ant-badge-status-dot { /deep/ .ant-badge-status-dot {
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-top: -3px; margin-top: 5px;
} }
</style> </style>