update Badge style

梁灏
1 parent 7b959eba
Showing 2 changed files with 19 additions and 2 deletions Show diff stats
examples/routers/badge.vue
src/components/badge/badge.vue
@@ -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>
 <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;