From 463174e7359de82801e82d268160856b9ac08862 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 26 Aug 2020 14:52:06 +0800
Subject: [PATCH] chore(Tag): use composition api

---
 src/tag/index.js | 38 +++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/tag/index.js b/src/tag/index.js
index c3f438913..b941ca5c0 100644
--- a/src/tag/index.js
+++ b/src/tag/index.js
@@ -1,4 +1,4 @@
-import { Transition } from 'vue';
+import { computed, Transition } from 'vue';
 import { createNamespace } from '../utils';
 import Icon from '../icon';
 
@@ -26,36 +26,40 @@ export default createComponent({
   emits: ['close'],
 
   setup(props, { slots, emit }) {
-    return function () {
-      const { type, mark, plain, color, round, size } = props;
+    const onClose = (event) => {
+      event.stopPropagation();
+      emit('close');
+    };
 
-      const key = plain ? 'color' : 'backgroundColor';
-      const style = { [key]: color };
+    const style = computed(() => {
+      const key = props.plain ? 'color' : 'backgroundColor';
+      const style = { [key]: props.color };
 
       if (props.textColor) {
         style.color = props.textColor;
       }
+    });
+
+    return () => {
+      const { show, type, mark, plain, round, size, closeable } = props;
 
       const classes = { mark, plain, round };
       if (size) {
         classes[size] = size;
       }
 
-      const CloseIcon = props.closeable && (
-        <Icon
-          name="cross"
-          class={bem('close')}
-          onClick={(event) => {
-            event.stopPropagation();
-            emit('close');
-          }}
-        />
+      const CloseIcon = closeable && (
+        <Icon name="cross" class={bem('close')} onClick={onClose} />
       );
 
       return (
-        <Transition name={props.closeable ? 'van-fade' : null}>
-          {props.show ? (
-            <span key="content" style={style} class={bem([classes, type])}>
+        <Transition name={closeable ? 'van-fade' : null}>
+          {show ? (
+            <span
+              key="content"
+              style={style.value}
+              class={bem([classes, type])}
+            >
               {slots.default?.()}
               {CloseIcon}
             </span>