uni/packages/tag/index.vue

<!--
 * @Author: peerless_hero peerless_hero@outlook.com
 * @Date: 2023-07-11 02:12:08
 * @LastEditors: zhaojinfeng 121016171@qq.com
 * @LastEditTime: 2023-08-03 17:26:31
 * @FilePath: \uni\packages\tag\index.vue
 * @Description:
 *
-->
<template>
  <text
    class="th-tag"
    :class="className"
    text-center
    inline-block
    min-w-128rpx
    h-48rpx
    text-24rpx
    font-500
    leh-48
    border-2rpx
    border-solid
    rounded-16rpx
  >
    &nbsp;&nbsp;&nbsp;{{ text }}&nbsp;&nbsp;&nbsp;
  </text>
</template>

<script lang="ts" setup name="Tag">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
  /** 类型 */
    type?: 'default' | 'primary' | 'danger' | 'warning' | 'success' | 'info'
    /** 显示文本 */
    text?: string
    /** 纯文字，无背景色 */
    plain?: boolean
  }>(),
  {
    type: 'default',
  },
)

const className = computed(() => {
  const bg = props.plain ? '' : ' bgc'
  switch (props.type) {
    case 'danger':
      return `th-tag-danger${bg}`
    case 'primary':
      return `th-tag-primary${bg}`
    case 'warning':
      return `th-tag-warning${bg}`
    case 'success':
      return `th-tag-success${bg}`
    default:
      return `th-tag-default${bg}`
  }
})
</script>

<style lang="scss">
.th-tag {

  &.th-tag-default {
    border-color: #cccccc;
    color: #393939;
    &.bgc {
      background-color: #f9f9f9;
    }
  }

  &.th-tag-danger {
    border-color: #fbc7c7;
    color: #e43d33;
    &.bgc{
      background-color: #fef0f0;
    }
  }

  &.th-tag-warning {
    border-color: #f6ddb8;
    color: #f3a73f;
    &.bgc{
      background-color: #fff6e8;
    }
  }

  &.th-tag-success {
    border-color: #c8eab7;
    color: #18bc37;
    &.bgc {
      background-color: #f0f9eb;
    }
  }
  &.th-tag-primary {
    border-color: #bcddff;
    color: #2979ff;
    &.bgc{
      background-color: #f2f7ff;
    }
  }
}
</style>