uni-app 4.9封装badge组件

角标文件内容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>

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