fs-uni-template/components/fs-tag/fs-tag.vue

<template>
	<view
		class="fs-tag"
		:class="[
			{
				'fs-tag-round': round,
				'fs-tag-plain': plain,
				'fs-tag-mark': mark,
				'fs-tag-mark-reverse': markReverse,
				'fs-tag-none': closed
			},
			'fs-tag-' + size,
			'bg-' + type
		]"
		:style="[{ color: color, backgroundColor: bgColor }, customStyle]"
	>
		<slot></slot>
		<fs-icon class="fs-tag-close" size="13px" type="icon-close" v-if="closable" @click="handleClosed"></fs-icon>
	</view>
</template>

<script>
/**
 * 标签组件
 * @description 标签组件
 * @property {String} size = [default | medium | large] 标签大小
 * @property {String} color 文字颜色
 * @property {String} bgColor 背景色
 * @property {Boolean} plain 是否镂空
 * @property {Boolean} mark 标记
 * @property {Boolean} markReverse 标记反转
 * @property {Boolean} round 圆角
 * @property {Boolean} closable 标签是否可移除
 * @property {Object} customStyle 标签自定义样式
 * @property {String} type = [primary | danger | warning | info | success | default] 标签颜色类型
 */
export default {
	name: 'fs-tag'
}
</script>

<script setup>
import { ref } from 'vue'

const props = defineProps({
	plain: Boolean,
	round: Boolean,
	mark: Boolean,
	markReverse: Boolean,
	closable: Boolean,
	type: {
		type: String,
		default: 'primary',
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger', 'default'].includes(value)
		}
	},
	color: String,
	bgColor: String,
	size: {
		type: String,
		default: 'default',
		validator(value) {
			return ['default', 'medium', 'large'].includes(value)
		}
	},
	customStyle: {
		type: Object,
		default() {
			return {}
		}
	}
})

const closed = ref(false)
const handleClosed = () => {
	closed.value = true
}
</script>

<style lang="scss" scoped>
.fs-tag {
	display: inline-flex;
	height: 38rpx;
	line-height: 38rpx;
	padding: 0 10rpx;
	font-size: 11px;
	color: #fff;
	vertical-align: middle;
	border-radius: 4rpx;
	align-items: center;
	white-space: nowrap;

	&-plain {
		background-color: transparent !important;
		line-height: 32rpx;
		border: 2rpx solid currentColor;

		&.bg-default {
			color: var(--disabled);
		}
		&.bg-primary {
			color: var(--primary);
		}
		&.bg-success {
			color: var(--success);
		}
		&.bg-warning {
			color: var(--warning);
		}
		&.bg-info {
			color: var(--info);
		}
		&.bg-danger {
			color: var(--danger);
		}
	}

	&-round {
		border-radius: 30rpx;
	}
	&-mark {
		border-radius: 0 25rpx 25rpx 0;
	}
	&-mark-reverse {
		border-radius: 25rpx 0 0 25rpx;
	}

	&-medium {
		font-size: 12px;
		height: 48rpx;
		line-height: 48rpx;
		padding: 0 20rpx;
		&.plain {
			line-height: 48rpx;
		}
	}
	&-large {
		font-size: 13px;
		height: 58rpx;
		line-height: 58rpx;
		padding: 0 30rpx;
		&.fs-tag-plain {
			line-height: 58rpx;
		}
		&.fs-tag-mark-reverse {
			border-radius: 50rpx 0 0 50rpx;
		}
	}

	&-close {
		margin-left: 8rpx;
	}
	&-none {
		display: none;
	}
}
.bg-default {
	background-color: #cfcfcf;
}
</style>