From 15368be1723ee42255794524c1adee5b3cfd2c32 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Thu, 2 Mar 2017 12:05:57 +0800
Subject: [PATCH] Support Badge

---
 CHANGE.md                      |  4 +++-
 README.md                      |  2 +-
 src/components/badge/badge.vue | 10 +++++-----
 src/index.js                   |  4 ++--
 test/app.vue                   |  1 +
 test/main.js                   |  4 ++++
 test/routers/badge.vue         | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 7 files changed, 66 insertions(+), 9 deletions(-)
 create mode 100644 test/routers/badge.vue

diff --git a/CHANGE.md b/CHANGE.md
index d572e08..8587fc8 100644
--- a/CHANGE.md
+++ b/CHANGE.md
@@ -9,4 +9,6 @@ value 改为了 label，使用 v-model，废弃 checked
 ### CheckboxGroup
 value 改为了 label，使用 v-model，废弃 checked
 ### Switch
-废弃checked， 改为了 value，使用 v-model
\ No newline at end of file
+废弃checked， 改为了 value，使用 v-model
+### Badge
+class 改为了 className
\ No newline at end of file
diff --git a/README.md b/README.md
index 2944047..e091219 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@
 - [ ] Notice
 - [ ] Modal
 - [ ] Progress
-- [ ] Badge
+- [x] Badge
 - [ ] Collapse
 - [x] Timeline
 - [ ] Tag
diff --git a/src/components/badge/badge.vue b/src/components/badge/badge.vue
index d80120e..9581302 100644
--- a/src/components/badge/badge.vue
+++ b/src/components/badge/badge.vue
@@ -1,9 +1,9 @@
 <template>
-    <span v-if="dot" :class="classes" v-el:badge>
+    <span v-if="dot" :class="classes" ref="badge">
         <slot></slot>
         <sup :class="dotClasses" v-show="badge"></sup>
     </span>
-    <span v-else :class="classes" v-el:badge>
+    <span v-else :class="classes" ref="badge">
         <slot></slot>
         <sup v-if="count" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
     </span>
@@ -22,7 +22,7 @@
                 type: [Number, String],
                 default: 99
             },
-            class: String
+            className: String
         },
         computed: {
             classes () {
@@ -35,7 +35,7 @@
                 return [
                     `${prefixCls}-count`,
                     {
-                        [`${this.class}`]: !!this.class,
+                        [`${this.className}`]: !!this.className,
                         [`${prefixCls}-count-alone`]: this.alone
                     }
                 ];
@@ -68,7 +68,7 @@
             };
         },
         compiled () {
-            const child_length = this.$els.badge.children.length;
+            const child_length = this.$refs.badge.children.length;
             if (child_length === 1) {
                 this.alone = true;
             }
diff --git a/src/index.js b/src/index.js
index a1752d4..93e9d6f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,7 @@ import 'core-js/fn/array/find-index';
 import Affix from './components/affix';
 import Alert from './components/alert';
 // import BackTop from './components/back-top';
-// import Badge from './components/badge';
+import Badge from './components/badge';
 // import Breadcrumb from './components/breadcrumb';
 import Button from './components/button';
 // import Card from './components/card';
@@ -50,7 +50,7 @@ const iview = {
     Affix,
     Alert,
     // BackTop,
-    // Badge,
+    Badge,
     // Breadcrumb,
     // BreadcrumbItem: Breadcrumb.Item,
     // iButton: Button,
diff --git a/test/app.vue b/test/app.vue
index 524eefd..fd5ff23 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -23,6 +23,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/timeline">Timeline</router-link></li>
                 <li><router-link to="/switch">Switch</router-link></li>
                 <li><router-link to="/alert">Alert</router-link></li>
+                <li><router-link to="/badge">Badge</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index cdafab4..5484b20 100644
--- a/test/main.js
+++ b/test/main.js
@@ -56,6 +56,10 @@ const router = new VueRouter({
         {
             path: '/alert',
             component: require('./routers/alert.vue')
+        },
+        {
+            path: '/badge',
+            component: require('./routers/badge.vue')
         }
     ]
 });
diff --git a/test/routers/badge.vue b/test/routers/badge.vue
new file mode 100644
index 0000000..241e267
--- /dev/null
+++ b/test/routers/badge.vue
@@ -0,0 +1,50 @@
+<style scoped>
+    .demo-badge{
+        width: 42px;
+        height: 42px;
+        background: #eee;
+        border-radius: 6px;
+        display: inline-block;
+    }
+</style>
+<style>
+    .demo-badge-alone{
+        background: #5cb85c !important;
+    }
+</style>
+<template>
+    <div>
+        <Badge count="3">
+            <a href="#" class="demo-badge"></a>
+        </Badge>
+        <Badge dot>
+            <a href="#" class="demo-badge"></a>
+        </Badge>
+        <Badge dot>
+            <Icon type="ios-bell-outline" size="26"></Icon>
+        </Badge>
+        <Badge dot>
+            <a href="#">可以是一个链接</a>
+        </Badge>
+        <Badge count="100">
+            <a href="#" class="demo-badge"></a>
+        </Badge>
+        <Badge count="1000" overflow-count="999">
+            <a href="#" class="demo-badge"></a>
+        </Badge>
+        <br>
+        <Badge count="10"></Badge>
+        <br><br>
+        <Badge count="20" class-name="demo-badge-alone"></Badge>
+    </div>
+</template>
+<script>
+    export default {
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {},
+        methods: {}
+    };
+</script>
\ No newline at end of file
--
libgit2 0.21.4