update Badge style

This commit is contained in:
梁灏 2018-06-21 12:39:37 +08:00
parent 7b959eba7e
commit 457fe0874c
2 changed files with 19 additions and 2 deletions

View file

@ -43,6 +43,15 @@
<br /> <br />
<Badge status="warning" text="Warning" /> <Badge status="warning" text="Warning" />
</div> </div>
<div style="margin: 50px">
<Badge dot>
<a href="//iviewui.com">我是一个链接</a>
</Badge>
<br><br>
<Badge :count="10" :offset="[-5, -5]">
<a href="//iviewui.com">我是一个链接</a>
</Badge>
</div>
</div> </div>
</template> </template>
<script> <script>

View file

@ -1,7 +1,7 @@
<template> <template>
<span v-if="dot" :class="classes" ref="badge"> <span v-if="dot" :class="classes" ref="badge">
<slot></slot> <slot></slot>
<sup :class="dotClasses" v-show="badge"></sup> <sup :class="dotClasses" :style="styles" v-show="badge"></sup>
</span> </span>
<span v-else-if="status" :class="classes" class="ivu-badge-status" ref="badge"> <span v-else-if="status" :class="classes" class="ivu-badge-status" ref="badge">
<span :class="statusClasses"></span> <span :class="statusClasses"></span>
@ -9,7 +9,7 @@
</span> </span>
<span v-else :class="classes" ref="badge"> <span v-else :class="classes" ref="badge">
<slot></slot> <slot></slot>
<sup v-if="hasCount" :class="countClasses" v-show="badge">{{ finalCount }}</sup> <sup v-if="hasCount" :style="styles" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
</span> </span>
</template> </template>
<script> <script>
@ -70,6 +70,14 @@
} }
]; ];
}, },
styles () {
const style = {};
if (this.offset && this.offset.length === 2) {
style['margin-top'] = `${this.offset[0]}px`;
style['margin-right'] = `${this.offset[1]}px`;
}
return style;
},
finalCount () { finalCount () {
if (this.text !== '') return this.text; if (this.text !== '') return this.text;
return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count; return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;