Merge pull request #2124 from daiyanze/feature/checkable_tag

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

src/components/tag/tag.vue

@@ -1,6 +1,6 @@
 <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);
+                }
             }
         }
     };