done

packages/badge/src/badge-group.vue

@@ -6,6 +6,11 @@
 
 <script>
 export default {
-  name: 'z-badge-group'
+  name: 'z-badge-group',
+  data () {
+    return {
+      activeKey: '0'
+    }
+  }
 };
 </script>

packages/badge/src/badge.vue

@@ -1,22 +1,41 @@
 <template>
-    <a class="z-badge" :class="{ 'is-select' : isSelected }" :href="url" @click="handleClick">
+    <a class="z-badge" :class="classNames" :href="url" @click="handleClick">
       <div class="z-badge__active"></div>
       <div v-if="info" class="z-badge__info">{{info}}</div>
-      {{value}}
+      {{title}}
     </a>
 </template>
 <script>
 export default {
   name: 'z-badge',
   props: {
+    badgeKey: {
+      type: [Number, String],
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
     url: String,
     value: String,
-    info: String,
-    isSelected: Boolean
+    info: String
+  },
+  data () {
+    return {
+      isSelected: false
+    }
   },
   methods: {
     handleClick() {
-      this.$emit('click');
+      this.$parent.activeKey = this.badgeKey;
+    }
+  },
+  computed: {
+    classNames () {
+      return {
+        'is-select': this.badgeKey == this.$parent.activeKey ? true : false
+      }
     }
   }
 };