init

init

components/badge/badge.vue

@@ -0,0 +1,77 @@
+<template>
+    <span v-if="dot" :class="classes" v-el:badge>
+        <slot></slot>
+        <sup :class="dotClasses" v-show="badge"></sup>
+    </span>
+    <span v-else :class="classes" v-el:badge>
+        <slot></slot>
+        <sup v-if="count" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
+    </span>
+</template>
+<script>
+    const prefixCls = 'ivu-badge';
+
+    export default {
+        props: {
+            count: [Number, String],
+            dot: {
+                type: Boolean,
+                default: false
+            },
+            overflowCount: {
+                type: [Number, String],
+                default: 99
+            },
+            class: String
+        },
+        computed: {
+            classes () {
+                return `${prefixCls}`;
+            },
+            dotClasses () {
+                return `${prefixCls}-dot`;
+            },
+            countClasses () {
+                return [
+                    `${prefixCls}-count`,
+                    {
+                        [`${this.class}`]: !!this.class,
+                        [`${prefixCls}-count-alone`]: this.alone
+                    }
+                ]
+            },
+            finalCount () {
+                return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;
+            },
+            badge () {
+                let status = false;
+
+                if (this.count) {
+                    status = !(parseInt(this.count) === 0);
+                }
+
+                if (this.dot) {
+                    status = true;
+                    if (this.count) {
+                        if (parseInt(this.count) === 0) {
+                            status = false;
+                        }
+                    }
+                }
+
+                return status;
+            }
+        },
+        data () {
+            return {
+                alone: false
+            }
+        },
+        compiled () {
+            const child_length = this.$els.badge.children.length;
+            if (child_length === 1) {
+                this.alone = true;
+            }
+        }
+    }
+</script>