<template>
  <div
    class="kl-tag"
    :style="{
      color,
      background: bgColor,
      borderRadius,
      border: showBorder ? '1px solid' : '',
      borderColor: borderColor ? borderColor : color,
    }"
  >
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
  import type { PropType } from 'vue'
  defineProps({
    color: {
      //文字颜色
      type: String as PropType<string>,
      default: '#3A84F0',
    },
    bgColor: {
      //背景色
      type: String as PropType<string>,
      default: '#EAF1FF',
    },
    showBorder: {
      //是否需要边框
      type: Boolean as PropType<boolean>,
      default: false,
    },
    borderColor: {
      //边框颜色
      type: String as PropType<string>,
      default: '',
    },
    borderRadius: {
      //圆角大小
      type: String as PropType<string>,
      default: '4px',
    },
  })
</script>

<style lang="scss" scoped>
  .kl-tag {
    display: inline-block;
    font-size: 12px;
    padding: 1px 4px;
  }
</style>
