update Badge style
This commit is contained in:
parent
7b959eba7e
commit
457fe0874c
2 changed files with 19 additions and 2 deletions
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Reference in a new issue