support Tag

support Tag

support Tag
梁灏
1 parent 15368be1
Showing 6 changed files with 50 additions and 50 deletions Show diff stats
README.md
src/components/tag/tag.vue
src/index.js
test/app.vue
test/main.js
test/routers/tag.vue
@@ -44,7 +44,7 @@
 - [x] Badge
 - [ ] Collapse
 - [x] Timeline
-- [ ] Tag
+- [x] Tag
 - [ ] Tooltip
 - [ ] Poptip
 - [ ] Carousel
 <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';
@@ -35,7 +35,7 @@ import Steps from &#39;./components/steps&#39;;
 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,
@@ -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>
@@ -60,6 +60,10 @@ const router = new VueRouter({
         {
             path: '/badge',
             component: require('./routers/badge.vue')
+        },
+        {
+            path: '/tag',
+            component: require('./routers/tag.vue')
         }
     ]
 });
 <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');
             }
         }