fix

components/tag/demo/control.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <template v-for="(tag, index) in tags">
-      <ToolTip v-if="tag.length > 20" :key="tag" :title="tag">
+      <Tooltip v-if="tag.length > 20" :key="tag" :title="tag">
         <Tag :key="tag" :closable="index !== 0" @after-close="() => handleClose(tag)">
           {{`${tag.slice(0, 20)}...`}}
         </Tag>
-      </ToolTip>
+      </Tooltip>
       <Tag v-else :key="tag" :closable="index !== 0" @after-close="() => handleClose(tag)">
         {{tag}}
       </Tag>
@@ -21,11 +21,13 @@
       @blur="handleInputConfirm"
       @keyup.enter="handleInputConfirm"
     />
-    <AntButton v-else size="small" type="dashed" @click="showInput">+ New Tag</AntButton>
+    <Tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
+      <Icon type="plus" /> New Tag
+    </Tag>
   </div>
 </template>
 <script>
-import { Tag, Button, ToolTip } from 'antd'
+import { Tag, Tooltip, Icon } from 'antd'
 export default {
   data () {
     return {
@@ -68,8 +70,8 @@ export default {
   },
   components: {
     Tag,
-    AntButton: Button,
+    Tooltip,
-    ToolTip,
+    Icon,
   },
 }
 </script>

components/tag/style/index.less

@@ -4,12 +4,13 @@
 @tag-prefix-cls: ~"@{ant-prefix}-tag";
 
 .@{tag-prefix-cls} {
+  .reset-component;
   display: inline-block;
   line-height: 20px;
   height: 22px;
-  padding: 0 8px;
+  padding: 0 7px;
   border-radius: @border-radius-base;
-  border: @border-width-base @border-style-base @border-color-split;
+  border: @border-width-base @border-style-base @border-color-base;
   background: @tag-default-bg;
   font-size: @tag-font-size;
   transition: all 0.3s @ease-out;
@@ -39,13 +40,13 @@
   .@{iconfont-css-prefix}-cross {
     .iconfont-size-under-12px(10px);
     cursor: pointer;
-    font-weight: bold;
     margin-left: 3px;
-    transition: all 0.3s @ease-out;
+    transition: all .3s;
-    opacity: 0.66;
+    color: @text-color-secondary;
+    font-weight: bold;
 
     &:hover {
-      opacity: 1;
+      color: @heading-color;
     }
   }
 
@@ -85,31 +86,29 @@
   }
 
   &-zoom-enter,
-  &-zoom-enter-active {
+  &-zoom-appear {
-    animation: antFadeIn 0.2s @ease-in-out-circ;
+    animation: antFadeIn .2s @ease-in-out-circ;
     animation-fill-mode: both;
   }
 
-  &-zoom-leave-active {
+  &-zoom-leave {
-    animation: antZoomOut 0.3s @ease-in-out-circ;
+    animation: antZoomOut .3s @ease-in-out-circ;
     animation-fill-mode: both;
-    width: 0 !important;
-    padding: 0;
-    margin: 0;
   }
 
-  @colors: pink, red, orange, yellow, cyan, green, blue, purple;
+  @colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple;
 
   // mixin to iterate over colors and create CSS class for each one
   .make-color-classes(@i: length(@colors)) when (@i > 0) {
     .make-color-classes(@i - 1);
     @color: extract(@colors, @i);
-    @lightColor: "@{color}-2";
+    @lightColor: "@{color}-1";
+    @lightBorderColor: "@{color}-3";
     @darkColor: "@{color}-6";
     &-@{color} {
       color: @@darkColor;
       background: @@lightColor;
-      border-color: @@lightColor;
+      border-color: @@lightBorderColor;
     }
     &-@{color}-inverse {
       background: @@darkColor;

contributors.md

@@ -8,7 +8,7 @@ Radio  |  done
 Tabs | done
 Tag | done
 ToolTip | done
-Popconfirm
+Popconfirm | done
 Popover | done
 Menu
 Carousel

examples/routes.js

@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const com = pathnameArr[1] || 'button'
   const demo = pathnameArr[2] || 'index'
   return {
-    component: import(`../components/radio/demo/${demo}.vue`),
+    component: import(`../components/tag/demo/${demo}.vue`),
   }
 }
 export default [