drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Badge style

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
examples/routers/badge.vue
View file

@ -43,6 +43,15 @@
<br />
<Badge status="warning" text="Warning" />
</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>
</template>
<script>

12
src/components/badge/badge.vue
View file

@ -1,7 +1,7 @@
<template>
<span v-if="dot" :class="classes" ref="badge">
<slot></slot>
<sup :class="dotClasses" v-show="badge"></sup>
<sup :class="dotClasses" :style="styles" v-show="badge"></sup>
</span>
<span v-else-if="status" :class="classes" class="ivu-badge-status" ref="badge">
<span :class="statusClasses"></span>
@ -9,7 +9,7 @@
</span>
<span v-else :class="classes" ref="badge">
<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>
</template>
<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 () {
if (this.text !== '') return this.text;
return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;