uni-app 4.9封装badge组件

Posted 2021-09-06 2019ab

角标文件内容free-badge.vue

<template>
	<text class="free-badge bg-danger text-white rounded-circle font-sm" :class="badgeClass" :style="bageStyle" :num="num">{{num}}</text>
</template>

<script>
	export default{
		props:{
			badgeClass:{
				type:String,
				default:""
			},
			bageStyle:{
				type:String,
				default:""
			},
			num:{
				type:Number,
				default:1
			}
		}
	}
</script>

<style>
	.free-badge{
		padding-left: 14rpx;
		padding-right: 14rpx;
		padding-bottom: 6rpx;
		padding-top: 6rpx;
	}
</style>

在index.nvue中引入

// 第一步
import freeBadge from "@/components/free-ui/free-badge.vue";
// 第二步
components: {
			freeBadge
		},
// 第三步
<!-- 角标 -->
<free-badge badgeClass="position-absolute" bageStyle="top:15rpx;right:15rpx;" num="11"></free-badge>

感谢大家观看，我们下期再见。