From 456daf3492b924f4346f003a1fddd34b98b6628b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 2 Mar 2017 12:22:15 +0800
Subject: [PATCH] support Tag

support Tag
---
 README.md                  |  2 +-
 src/components/tag/tag.vue |  8 ++--
 src/index.js               |  4 +-
 test/app.vue               |  1 +
 test/main.js               |  4 ++
 test/routers/tag.vue       | 81 +++++++++++++++++---------------------
 6 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/README.md b/README.md
index e0912190..bcc13841 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@
 - [x] Badge
 - [ ] Collapse
 - [x] Timeline
-- [ ] Tag
+- [x] Tag
 - [ ] Tooltip
 - [ ] Poptip
 - [ ] Carousel
diff --git a/src/components/tag/tag.vue b/src/components/tag/tag.vue
index f600ab4f..add0b61b 100644
--- a/src/components/tag/tag.vue
+++ b/src/components/tag/tag.vue
@@ -1,7 +1,9 @@
 <template>
-    <div :class="classes" transition="fade">
-        <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click.stop="close"></Icon>
-    </div>
+    <transition name="fade">
+        <div :class="classes">
+            <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click.native.stop="close"></Icon>
+        </div>
+    </transition>
 </template>
 <script>
     import Icon from '../icon';
diff --git a/src/index.js b/src/index.js
index 93e9d6f5..ad1b2af4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -35,7 +35,7 @@ import Steps from './components/steps';
 import Switch from './components/switch';
 // import Table from './components/table';
 // import Tabs from './components/tabs';
-// import Tag from './components/tag';
+import Tag from './components/tag';
 import Timeline from './components/timeline';
 // import TimePicker from './components/time-picker';
 // import Tooltip from './components/tooltip';
@@ -102,7 +102,7 @@ const iview = {
     // iTable: Table,
     // Tabs: Tabs,
     // TabPane: Tabs.Pane,
-    // Tag,
+    Tag,
     Timeline,
     TimelineItem: Timeline.Item,
     // TimePicker,
diff --git a/test/app.vue b/test/app.vue
index fd5ff237..220e57ee 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -24,6 +24,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <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>
+                <li><router-link to="/tag">Tag</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index 5484b20a..b7031c11 100644
--- a/test/main.js
+++ b/test/main.js
@@ -60,6 +60,10 @@ const router = new VueRouter({
         {
             path: '/badge',
             component: require('./routers/badge.vue')
+        },
+        {
+            path: '/tag',
+            component: require('./routers/tag.vue')
         }
     ]
 });
diff --git a/test/routers/tag.vue b/test/routers/tag.vue
index 39f5e840..b37f111a 100644
--- a/test/routers/tag.vue
+++ b/test/routers/tag.vue
@@ -1,47 +1,38 @@
 <template>
-    <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>
-    <i-button type="primary" @click="modal1 = true">显示对话框</i-button>
-    <Modal
-            :visible.sync="modal1"
-            title="普通的Modal对话框标题"
-            :loading="loading" @on-ok="ok">
-        <p>对话框内容</p>
-        <p>对话框内容</p>
-        <p>对话框内容</p>
-        {{ loading }}
-        <i-button @click="loading = true">true</i-button>
-        <i-button @click="loading = false">false</i-button>
-    </Modal>
-    <br><br>
-    <Tag type="border" color="yellow" closable @click="clickTag" @on-close="clickTagClose">标签一</Tag>
+    <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>
+    </div>
 </template>
 <script>
     import { Tag, Modal, iButton } from 'iview';
@@ -50,7 +41,8 @@
         data () {
             return {
                 modal1: false,
-                loading: true
+                loading: true,
+                ccc: true
             }
         },
         methods: {
@@ -63,6 +55,7 @@
                 console.log('click tag');
             },
             clickTagClose() {
+                this.ccc = false;
                 console.log('click tag close-icon');
             }
         }