Merge pull request #2124 from daiyanze/feature/checkable_tag

Feature/checkable tag (追加功能：可选标签)

Merge pull request #2124 from daiyanze/feature/checkable_tag
Feature/checkable tag (追加功能：可选标签)
Aresn · GitHub
2 parents 5064c7b3 fd79f102
Showing 2 changed files with 37 additions and 6 deletions Show diff stats
examples/routers/tag.vue
src/components/tag/tag.vue
 <template>
     <div>
-        <Tag v-for="item in count" :key="item" :name="item" @on-close="close" closable>标签{{ item + 1 }}</Tag>
+        <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>
     </div>
 </template>
@@ -9,13 +12,17 @@
         data () {
             return {
                 count: 3
-            }
+            };
         },
         methods: {
             close (e, name) {
                 console.log(e);
                 console.log(name);
+            },
+            check (e, name) {
+                console.log(e);
+                console.log(name);
             }
         }
-    }
+    };
 </script>
 <template>
     <transition name="fade">
-        <div :class="classes">
+        <div :class="classes" @click.stop="check">
             <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>
@@ -19,6 +19,14 @@
                 type: Boolean,
                 default: false
             },
+            checkable: {
+                type: Boolean,
+                default: false
+            },
+            checked: {
+                type: Boolean,
+                default: true
+            },
             color: {
                 validator (value) {
                     return oneOf(value, ['blue', 'green', 'red', 'yellow', 'default']);
@@ -33,14 +41,20 @@
                 type: [String, Number]
             }
         },
+        data () {
+            return {
+                isChecked: this.checked
+            };
+        },
         computed: {
             classes () {
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-${this.color}`]: !!this.color,
+                        [`${prefixCls}-${this.color}`]: !!this.color && (this.checkable && this.isChecked),
                         [`${prefixCls}-${this.type}`]: !!this.type,
-                        [`${prefixCls}-closable`]: this.closable
+                        [`${prefixCls}-closable`]: this.closable,
+                        [`${prefixCls}-checked`]: this.isChecked
                     }
                 ];
             },
@@ -61,6 +75,16 @@
                 } else {
                     this.$emit('on-close', event, this.name);
                 }
+            },
+            check () {
+                if (!this.checkable) return;
+                const checked = !this.isChecked;
+                this.isChecked = checked;
+                if (this.name === undefined) {
+                    this.$emit('on-change', checked);
+                } else {
+                    this.$emit('on-change', checked, this.name);
+                }
             }
         }
     };