Tag: add click event (#14106)

* Tag: add tag click event handle

* Tag: add doc and unit test.

examples/docs/en-US/tag.md

@@ -212,4 +212,5 @@ Besides default size, Tag component provides three additional sizes for you to c
 ### Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
+| click | triggers when Tag is clicked | — |
 | close | triggers when Tag is removed | — |
\ No newline at end of file

examples/docs/es/tag.md

@@ -212,4 +212,5 @@ Además del tamaño predeterminado, el componente Tag proporciona tres tamaños
 ### Eventos
 | Nombre | Descripción                          | Parametros |
 | ------ | ------------------------------------ | ---------- |
+| click  | se disoara cuando el Tag es clic     | —          |
 | close  | se disoara cuando el Tag es removido | —          |
\ No newline at end of file

examples/docs/zh-CN/tag.md

@@ -212,4 +212,5 @@ Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
-| close | 关闭 Tag 时触发的事件 | — |
+| click | 点击 Tag 时触发的事件 | — |
+| close | 关闭 Tag 时触发的事件 | — |
\ No newline at end of file

packages/tag/src/tag.vue

@@ -14,6 +14,10 @@
       handleClose(event) {
         event.stopPropagation();
         this.$emit('close', event);
+      },
+      handleClick(event) {
+        event.stopPropagation();
+        this.$emit('click', event);
       }
     },
     computed: {
@@ -26,7 +30,7 @@
         this.tagSize ? `el-tag--${this.tagSize}` : '',
         {'is-hit': this.hit}
       ];
-      const tagEl = (<span class={classes} style={{backgroundColor: this.color}}>
+      const tagEl = (<span class={classes} style={{backgroundColor: this.color}} on-click={this.handleClick}>
         { this.$slots.default }
         {
           this.closable && <i class="el-tag__close el-icon-close" on-click={this.handleClose}></i>

test/unit/specs/tag.spec.js

@@ -82,9 +82,35 @@ describe('Tag', () => {
   it('color', () => {
     vm = createVue({
       template: `
-      <el-tag color="rgb(0, 0, 0)"></el-tag>
+      <el-tag ref="tag" color="rgb(0, 0, 0)"></el-tag>
       `
     }, true);
     expect(vm.$el.style.backgroundColor).to.equal('rgb(0, 0, 0)');
   });
+
+  it('click', done => {
+    vm = createVue({
+      template: `
+      <el-tag ref="tag" @click="handleClick">点击标签</el-tag>
+      `,
+      data() {
+        return {
+          clicksCount: 0
+        };
+      },
+      methods: {
+        handleClick() {
+          this.clicksCount = this.clicksCount + 1;
+        }
+      }
+    }, true);
+
+    let tag = vm.$refs.tag;
+    tag.$el.click();
+
+    setTimeout(_ => {
+      expect(vm.clicksCount).to.be.equal(1);
+      done();
+    }, 20);
+  });
 });