组件代码

<template><view class="tag" :class="[props.mode, props.shape]"><slot name="left"><!-- icon图标 没有传入图标时不显示 --><u-icon v-if="props.icon !== ''" :name="props.icon" :color="props.color" size="20" /></slot>{{ props.text }}<slot name="right"></slot></view>
</template><script lang="ts" setup>
import { defineProps } from 'vue'
const props = defineProps({text: { //显示文本type: String,default: '自定义33'},color: { //颜色 主体颜色type: String,default: 'red'},mode: { //light	dark / plaintype: String,default: 'light'},shape: { //形状square circle / circleLeft / circleRighttype: String,default: 'circle'},icon: { //icon图标type: String,default: ''}})
</script><style lang="scss" scoped>
$color: v-bind(color);.tag {padding: 8rpx 22rpx;font-size: 20rpx;// border-radius: 36rpx;text-align: center;position: relative;z-index: 1;&::before {content: "";display: block;border-radius: 36rpx;position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.07;z-index: 0;}
}// 形状
.tag.circle {border-radius: 36rpx;
}.tag.circleLeft {border-radius: 36rpx;border-bottom-left-radius: 0;border-top-left-radius: 0;
}.tag.circleRight {border-radius: 36rpx;border-bottom-right-radius: 0;border-top-right-radius: 0;
}// 模式.tag.light {color: $color;border: 2rpx solid $color;&::before {background-color: $color;}
}.tag.light2 {color: $color;&::before {background-color: $color;}
}.tag.light3 {color: $color;background-color: #fff;&::before {// background-color: #fff;border: 1rpx solid $color;}
}.tag.dark {color: #fff;background-color: $color;
}.tag.plain {color: $color;border: 2rpx solid $color;
}
</style>

使用案例

<tag text="分享" mode="light2" icon="zhuanfa" color="#3820d9" />
<tag text="重新生成" mode="light3" icon="reload" color="#000" />

效果展示