<template>
<uni-shadow-root class="vant-tag-index"><view :class="'custom-class '+(utils.bem('tag', [type, size, { mark, plain, round }]))" :style="computed.rootStyle({ plain, color, textColor })">
  <slot></slot>
  <van-icon v-if="closeable" name="cross" custom-class="van-tag__close" @click="onClose"></van-icon>
</view></uni-shadow-root>
</template>
<wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs src="./index.wxs" module="computed"></wxs>
<script>
import VanIcon from '../icon/index.vue'
global['__wxVueOptions'] = {components:{'van-icon': VanIcon}}

global['__wxRoute'] = 'vant/tag/index'
import { VantComponent } from '../common/component';
VantComponent({
  props: {
    size: String,
    mark: Boolean,
    color: String,
    plain: Boolean,
    round: Boolean,
    textColor: String,
    type: {
      type: String,
      value: 'default',
    },
    closeable: Boolean,
  },
  methods: {
    onClose() {
      this.$emit('close');
    },
  },
});
export default global['__wxComponents']['vant/tag/index']
</script>
<style platform="mp-weixin">
@import '../common/index.css';

.van-tag {
  position: relative;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 8rpx;
  padding: var(--tag-padding,0 8rpx);
  color: #fff;
  color: var(--tag-text-color,#fff);
  font-size: 24rpx;
  font-size: var(--tag-font-size,24rpx);
  line-height: 32rpx;
  line-height: var(--tag-line-height,32rpx);
  border-radius: 4rpx;
  border-radius: var(--tag-border-radius,4rpx);
}

.van-tag--default {
  background-color: #969799;
  background-color: var(--tag-default-color,#969799);
}

.van-tag--default.van-tag--plain {
  color: #969799;
  color: var(--tag-default-color,#969799);
}

.van-tag--danger {
  background-color: #ee0a24;
  background-color: var(--tag-danger-color,#ee0a24);
}

.van-tag--danger.van-tag--plain {
  color: #ee0a24;
  color: var(--tag-danger-color,#ee0a24);
}

.van-tag--primary {
  background-color: #1989fa;
  background-color: var(--tag-primary-color,#1989fa);
}

.van-tag--primary.van-tag--plain {
  color: #1989fa;
  color: var(--tag-primary-color,#1989fa);
}

.van-tag--success {
  background-color: #07c160;
  background-color: var(--tag-success-color,#07c160);
}

.van-tag--success.van-tag--plain {
  color: #07c160;
  color: var(--tag-success-color,#07c160);
}

.van-tag--warning {
  background-color: #ff976a;
  background-color: var(--tag-warning-color,#ff976a);
}

.van-tag--warning.van-tag--plain {
  color: #ff976a;
  color: var(--tag-warning-color,#ff976a);
}

.van-tag--plain {
  background-color: #fff;
  background-color: var(--tag-plain-background-color,#fff);
}

.van-tag--plain:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2rpx solid;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.van-tag--medium {
  padding: 4rpx 12rpx;
  padding: var(--tag-medium-padding,4rpx 12rpx);
}

.van-tag--large {
  padding: 8rpx 16rpx;
  padding: var(--tag-large-padding,8rpx 16rpx);
  font-size: 28rpx;
  font-size: var(--tag-large-font-size,28rpx);
  border-radius: 8rpx;
  border-radius: var(--tag-large-border-radius,8rpx);
}

.van-tag--mark {
  border-radius: 0 1998rpx 1998rpx 0;
  border-radius: 0 var(--tag-round-border-radius,1998rpx) var(--tag-round-border-radius,1998rpx) 0;
}

.van-tag--mark:after {
  display: block;
  width: 4rpx;
  content: "";
}

.van-tag--round {
  border-radius: 1998rpx;
  border-radius: var(--tag-round-border-radius,1998rpx);
}

.van-tag__close {
  min-width: 1em;
  margin-left: 4rpx;
}
</style>