feat(Tag): add closeable prop (#4763)

src/tag/index.tsx

@@ -1,6 +1,7 @@
 import { createNamespace } from '../utils';
-import { inherit } from '../utils/functional';
+import { inherit, emit } from '../utils/functional';
 import { BORDER_SURROUND } from '../utils/constant';
+import Icon from '../icon';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -18,6 +19,7 @@ export type TagProps = {
   plain?: boolean;
   round?: boolean;
   textColor?: string;
+  closeable?: boolean;
 };
 
 const [createComponent, bem] = createNamespace('tag');
@@ -42,18 +44,30 @@ function Tag(
     classes[size] = size;
   }
 
-  return (
+  const Content = (
     <span
       style={style}
-      class={[
-        bem([classes, type]),
-        { [BORDER_SURROUND]: plain }
-      ]}
+      class={[bem([classes, type]), { [BORDER_SURROUND]: plain }]}
       {...inherit(ctx, true)}
     >
       {slots.default && slots.default()}
+      {props.closeable && (
+        <Icon
+          name="cross"
+          class={bem('close')}
+          onClick={() => {
+            emit(ctx, 'close');
+          }}
+        />
+      )}
     </span>
   );
+
+  if (props.closeable) {
+    return <transition name="van-fade">{Content}</transition>;
+  }
+
+  return Content;
 }
 
 Tag.props = {
@@ -63,6 +77,7 @@ Tag.props = {
   plain: Boolean,
   round: Boolean,
   textColor: String,
+  closeable: Boolean,
   type: {
     type: String,
     default: 'default'