Tag: optimize code (#13069)

* Tag: optimize code

* update tag.vue

packages/tag/src/tag.vue

@@ -1,20 +1,3 @@
-<template>
-  <transition :name="disableTransitions ? '' : 'el-zoom-in-center'">
-    <span
-      class="el-tag"
-      :class="[
-        type ? 'el-tag--' + type : '',
-        tagSize && `el-tag--${tagSize}`,
-        {'is-hit': hit}
-      ]"
-      :style="{backgroundColor: color}">
-      <slot></slot>
-      <i class="el-tag__close el-icon-close"
-        v-if="closable"
-        @click.stop="handleClose"></i>
-    </span>
-  </transition>
-</template>
 <script>
   export default {
     name: 'ElTag',
@@ -29,6 +12,7 @@
     },
     methods: {
       handleClose(event) {
+        event.stopPropagation();
         this.$emit('close', event);
       }
     },
@@ -36,6 +20,20 @@
       tagSize() {
         return this.size || (this.$ELEMENT || {}).size;
       }
+    },
+    render(h) {
+      const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '',
+        this.tagSize ? `el-tag--${this.tagSize}` : '',
+        {'is-hit': this.hit}
+      ];
+      const tagEl = (<span class={classes} style={{backgroundColor: this.color}}>
+        { this.$slots.default }
+        {
+          this.closable && <i class="el-tag__close el-icon-close" on-click={this.handleClose}></i>
+        }
+      </span>);
+
+      return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
     }
   };
 </script>