WeChatAppH5/pages/task/components/tag.vue

<template>
	<view class="tag-box" :style="{borderRadius:borderRadius,color:color,backgroundColor:bgColor}">
		{{tagName}}
	</view>
</template>

<script>
	export default {
		props: {
			color: {
				type: String,
				default: '',
				required: true
			},
			bgColor: {
				type: String,
				default: '',
				required: true
			},
			borderRadius: {
				type: String,
				default: '20rpx 0px 20rpx 0px',
			},
			tagName: {
				type: String,
				default: '',
				required: true
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag-box {
		min-width: 107rpx;
		height: 42rpx;
		padding: 0 10rpx;
		text-align: center;
		line-height: 42rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: Regular;
	}
</style>