Feature: Checkable tag

daiyanze
1 parent 2e8add2f
Showing 2 changed files with 36 additions and 9 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>
+        <Tag v-for="item in count" :key="item" :name="item" type="border" color="yellow" @on-close="close" @on-check="check" closable checkable>标签{{ 1 - item }}</Tag>
         <Button icon="ios-plus-empty" type="dashed" size="small" @click="count += 1">添加标签</Button>
     </div>
 </template>
@@ -9,13 +10,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">
-            <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 :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>
 </template>
@@ -19,6 +20,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 +42,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}-checkable`]: this.checkable
                     }
                 ];
             },
@@ -56,10 +71,17 @@
         },
         methods: {
             close (event) {
+                this._emitAction(event, 'on-close');
+            },
+            check (event) {
+                this.isChecked = !this.isChecked;
+                this._emitAction(event, 'on-check');
+            },
+            _emitAction (event, action) {
                 if (this.name === undefined) {
-                    this.$emit('on-close', event);
+                    this.$emit(action, event);
                 } else {
-                    this.$emit('on-close', event, this.name);
+                    this.$emit(action, event, this.name);
                 }
             }
         }