update Tag

梁灏
1 parent 2993f4ee
Showing 3 changed files with 45 additions and 13 deletions Show diff stats
examples/routers/tag.vue
src/components/tag/tag.vue
src/styles/components/tag.less
 <template>
     <div>
-        <Tag v-for="item in count" :key="item" :name="item" type="border" color="yellow" @on-close="close" @on-check="check" closable>标签{{ item + 1 }}</Tag>
-        <div><Tag v-for="item in count" :key="item" :name="item" color="yellow" @on-close="close" @on-check="check" checkable>可选标签{{ item + 1 }}</Tag></div>
-        <div><Tag v-for="item in count" :key="item" :name="item" type="dot" color="blue" @on-close="close" @on-check="check" closable checkable>可选可关闭标签{{ item + 1 }}</Tag></div>
-        <br />
-        <Button icon="ios-plus-empty" type="dashed" size="small" @click="count += 1">添加标签</Button>
+        <Tag checkable>标签一</Tag>
+        <Tag>标签二</Tag>
+        <Tag v-if="show" closable @on-close="handleClose">标签三</Tag>
+        <br><br>
+        <Tag type="border" checkable>标签三</Tag>
+        <Tag type="border" closable>标签四</Tag>
+        <Tag type="dot">标签一</Tag>
+        <Tag type="dot" closable>标签二</Tag>
+        <br><br>
+        <Tag closable color="blue" checkable>标签一</Tag>
+        <Tag closable color="green" checkable>标签二</Tag>
+        <Tag closable color="red" checkable>标签三</Tag>
+        <Tag closable color="yellow" checkable>标签四</Tag>
+        <br><br>
+        <Tag type="border" closable color="blue" checkable>标签一</Tag>
+        <Tag type="border" closable color="green">标签二</Tag>
+        <Tag type="border" closable color="red">标签三</Tag>
+        <Tag type="border" closable color="yellow">标签四</Tag>
+        <br><br>
+        <Tag type="dot" closable color="blue" checkable>标签一</Tag>
+        <Tag type="dot" closable color="green">标签二</Tag>
+        <Tag type="dot" closable color="red">标签三</Tag>
+        <Tag type="dot" closable color="yellow">标签四</Tag>
+        <br><br>
+        <Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag>
+        <Button icon="ios-plus-empty" type="dashed" size="small" @click="handleAdd">添加标签</Button>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                count: 3
+                show: true,
+                count: [0, 1, 2]
             };
         },
         methods: {
-            close (e, name) {
-                console.log(e);
-                console.log(name);
+            handleClose () {
+                this.show = false;
             },
-            check (e, name) {
-                console.log(e);
-                console.log(name);
+            handleAdd () {
+                if (this.count.length) {
+                    this.count.push(this.count[this.count.length - 1] + 1);
+                } else {
+                    this.count.push(0);
+                }
+            },
+            handleClose2 (event, name) {
+                const index = this.count.indexOf(name);
+                this.count.splice(index, 1);
             }
         }
     };
@@ -51,7 +51,7 @@
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-${this.color}`]: !!this.color && (this.checkable && this.isChecked),
+                        [`${prefixCls}-${this.color}`]: !!this.color,
                         [`${prefixCls}-${this.type}`]: !!this.type,
                         [`${prefixCls}-closable`]: this.closable,
                         [`${prefixCls}-checked`]: this.isChecked
@@ -21,6 +21,10 @@
     &:not(&-border):not(&-dot):not(&-checked){
         background: transparent;
         border: 0;
+        color: @text-color;
+        .@{tag-close-prefix-cls} {
+            color: @text-color !important;
+        }
     }
  
     &-dot{