<!--
  @name: tag标签
  @description: -
  @author 张文
  @date: 2022-01-20
-->
<template>
  <div class="ty-tag-box">
    <van-tag
      :type="type"
      :size="size"
      :color="color"
      :plain="plain"
      :round="round"
      :mark="mark"
      :text-color="textColor"
      :closeable="closeable"
      @click="ev=>$emit('click',ev)"
      @close="close"
    >
      <slot/>
    </van-tag>
  </div>
</template>

<script>

export default {
  name: "tyTag",
  props:{
    // 类型
    type:{
      type:String,
      default:'primary'
    },
    // 大小
    size:String,
    // 颜色
    color:String,
    // 是否空心
    plain:{
      type:Boolean,
      default: false
    },
    // 是否圆角
    round:{
      type:Boolean,
      default: false
    },
    // 是否为标记样式
    mark:{
      type:Boolean,
      default: false
    },
    // 文字颜色
    textColor:String,
    // 是否可关闭
    closeable:{
      type:Boolean,
      default: false
    },
  },
  data() {
    return {
    }
  },
  methods: {
    close(){
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="less">

@import "../../assets/css/var.less";

.ty-tag-box{
  display: inline-block;
  margin: 2px 4px;


  /deep/.van-tag{
    padding: 2px 8px;
    border-radius: 4px;
  }

  /deep/.van-tag--round {
    border-radius: 999px;
  }

  /deep/.van-tag--mark {
    border-radius: 0 999px 999px 0;
  }

  /deep/.van-tag--primary{
    background-color: @tagPrimaryColor;
    &.van-tag--plain{
      color: @tagPrimaryColor;
    }
  }

  /deep/.van-tag--success {
    background-color: @tagSuccessColor;
    &.van-tag--plain{
      color: @tagSuccessColor;
    }
  }

  /deep/.van-tag--danger {
    background-color: @tagDangerColor;
    &.van-tag--plain{
      color: @tagDangerColor;
    }
  }

  /deep/.van-tag--warning {
    background-color: @tagWarningColor;
    &.van-tag--plain{
      color: @tagWarningColor;
    }
  }

  /deep/.van-tag--large{
    padding: 6px 12px;
  }

  /deep/.van-tag--medium{
    padding: 4px 10px;
  }

  /deep/.van-tag__close {
    margin-left: 8px;
  }

  /deep/.van-tag--plain{
    background-color: #fff;
  }
}

</style>
