ShenhaiH5/src/components/HyTag.vue

<template>
  <view class="tag-item-wrapper">
    <view class="tag-item-content" :class="{ 'need-border': needBorder }">
      <image :src="minioUrl + imgUrl" :style="{ width: imgWidth, height: imgHeight }" />
      <view class="tag-item-text" :style="{ fontSize: fontSize }">{{ text }}</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useGlobal } from '@/composables/index'
const { minioUrl } = useGlobal()

// props需要传入 图片宽高、文字、字号、是否需要背景边框
defineProps({
  imgWidth: {
    type: String,
    default: '25rpx'
  },
  imgHeight: {
    type: String,
    default: '25rpx'
  },
  imgUrl: {
    type: String,
    default: '/icon_iot_canyin.png'
  },
  text: {
    type: String,
    default: '餐饮'
  },
  fontSize: {
    type: String,
    default: '22rpx'
  },
  needBorder: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="scss" scoped>
.tag-item-wrapper {
  box-sizing: border-box;
  margin: 0 10rpx 20rpx 0;
  .tag-item-content {
    border-radius: 4rpx;
    display: flex;
    align-items: center;
    width: fit-content;
    &.need-border {
      padding: 4rpx 22rpx;
      border: 1rpx solid#2374ff;
      background-color: #e6efff;
    }
    .tag-item-text {
      margin-left: 6rpx;
      line-height: 30rpx;
    }
  }
}
</style>