From ec4117cb430e63f44e924ab1cf218d3f8b476874 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Tue, 21 Mar 2017 15:41:22 +0800
Subject: [PATCH] tag add prop: name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

when use v-for to render Tag, you can use ‘name’ prop to close tag
---
 examples/routers/tag.vue     | 52 +++++-------------------------------
 src/components/card/card.vue |  2 +-
 src/components/tag/tag.vue   | 11 ++++++--
 3 files changed, 16 insertions(+), 49 deletions(-)

diff --git a/examples/routers/tag.vue b/examples/routers/tag.vue
index 099a461b..645170c6 100644
--- a/examples/routers/tag.vue
+++ b/examples/routers/tag.vue
@@ -1,60 +1,20 @@
 <template>
     <div>
-        <Tag>标签一</Tag>
-        <Tag>标签二</Tag>
-        <Tag closable>标签三</Tag>
-        <Tag closable color="blue">标签一</Tag>
-        <Tag closable color="green">标签二</Tag>
-        <Tag closable color="red">标签三</Tag>
-        <Tag closable color="yellow">标签四</Tag>
-        <br><br>
-        <Tag type="dot">标签一</Tag>
-        <Tag type="dot" closable>标签一</Tag>
-        <Tag type="dot" color="blue">标签一</Tag>
-        <Tag type="dot" color="blue" closable>标签一</Tag>
-        <Tag type="dot" color="green">标签一</Tag>
-        <Tag type="dot" color="green" closable>标签一</Tag>
-        <Tag type="dot" color="red">标签一</Tag>
-        <Tag type="dot" color="red" closable>标签一</Tag>
-        <Tag type="dot" color="yellow">标签一</Tag>
-        <Tag type="dot" color="yellow" closable>标签一</Tag>
-        <br><br>
-        <Tag type="border">标签一</Tag>
-        <Tag type="border" closable>标签一</Tag>
-        <Tag type="border" color="blue">标签一</Tag>
-        <Tag type="border" color="blue" closable>标签一</Tag>
-        <Tag type="border" color="green">标签一</Tag>
-        <Tag type="border" color="green" closable>标签一</Tag>
-        <Tag type="border" color="red">标签一</Tag>
-        <Tag type="border" color="red" closable>标签一</Tag>
-        <Tag type="border" color="yellow">标签一</Tag>
-        <Tag type="border" color="yellow" closable>标签一</Tag>
-        <Button type="primary" @click="modal1 = true">显示对话框</Button>
-        <br><br>
-        <Tag v-if="ccc" closable @on-close="clickTagClose">标签一</Tag>
+        <Tag v-for="item in count" :key="item" :name="item" @on-close="close" closable>标签{{ item + 1 }}</Tag>
+        <Button icon="ios-plus-empty" type="dashed" size="small" @click="count += 1">添加标签</Button>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                modal1: false,
-                loading: true,
-                ccc: true
+                count: 3
             }
         },
         methods: {
-            ok () {
-                setTimeout(() => {
-                    this.modal1 = false;
-                }, 2000);
-            },
-            clickTag() {
-                console.log('click tag');
-            },
-            clickTagClose() {
-                this.ccc = false;
-                console.log('click tag close-icon');
+            close (e, name) {
+                console.log(e);
+                console.log(name);
             }
         }
     }
diff --git a/src/components/card/card.vue b/src/components/card/card.vue
index 152f4334..e08a6055 100644
--- a/src/components/card/card.vue
+++ b/src/components/card/card.vue
@@ -58,7 +58,7 @@
                 if (this.padding !== defaultPadding) {
                     return {
                         padding: `${this.padding}px`
-                    }
+                    };
                 } else {
                     return '';
                 }
diff --git a/src/components/tag/tag.vue b/src/components/tag/tag.vue
index 80e157e8..a7fb0ae9 100644
--- a/src/components/tag/tag.vue
+++ b/src/components/tag/tag.vue
@@ -28,6 +28,9 @@
                 validator (value) {
                     return oneOf(value, ['border', 'dot']);
                 }
+            },
+            name: {
+                type: [String, Number]
             }
         },
         computed: {
@@ -52,8 +55,12 @@
             }
         },
         methods: {
-            close (e) {
-                this.$emit('on-close', e);
+            close (event) {
+                if (this.name === undefined) {
+                    this.$emit('on-close', event);
+                } else {
+                    this.$emit('on-close', event, this.name);
+                }
             }
         }
     };