Support Badge

Support Badge

CHANGE.md

@@ -10,3 +10,5 @@ value 改为了 label，使用 v-model，废弃 checked
 value 改为了 label，使用 v-model，废弃 checked
 ### Switch
 废弃checked， 改为了 value，使用 v-model
+### Badge
+class 改为了 className

README.md

@@ -41,7 +41,7 @@
 - [ ] Notice
 - [ ] Modal
 - [ ] Progress
-- [ ] Badge
+- [x] Badge
 - [ ] Collapse
 - [x] Timeline
 - [ ] Tag

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;
             }

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,

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>

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')
         }
     ]
 });

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>