Badge 徽标

出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息。

效果

使用方法

<template>
    <div class="container">
      <lc-title title="徽标"></lc-title>
      <category title="默认用法"></category>
      <div class="demo-w">
        <lc-badge :value="9" class="item"><div class="demo-svg"></div></lc-badge>
        <lc-badge :value="9" class="item">购物车</lc-badge>
        <lc-badge :value="9" class="item"><lc-button>购物车</lc-button></lc-badge>
      </div>

      <category title="Max用法"></category>
      <div class="demo-w">
        <lc-badge :value="200" :max="99" class="item"><div class="demo-svg"></div></lc-badge>
        <lc-badge :value="200" :max="99" class="item">购物车</lc-badge>
        <lc-badge :value="200" :max="99" class="item"><lc-button>购物车</lc-button></lc-badge>
      </div>

      <category title="文字用法"></category>
      <div class="demo-w">
        <lc-badge value="new" class="item"><div class="demo-svg"></div></lc-badge>
        <lc-badge value="new" class="item">购物车</lc-badge>
        <lc-badge value="new" :max="99" class="item"><lc-button>购物车</lc-button></lc-badge>
      </div>

      <category title="小圆点"></category>
      <div class="demo-w">
        <lc-badge :isDot="true" class="item"><div class="demo-svg"></div></lc-badge>
        <lc-badge :isDot="true" class="item">购物车</lc-badge>
        <lc-badge :isDot="true" :max="99" class="item"><lc-button>购物车</lc-button></lc-badge>
      </div>

       <category title="自定义位置"></category>
       <div class="demo-w">
         <lc-badge :value="200" top="5px" right="10px" class="item"><div class="demo-svg"></div></lc-badge>
       </div>
  </div>
</template>

<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
  components: { LcTitle, Category },
  data() {
    return {
    };
  },
  created() {
  },
  methods: {
      
  }
};
</script>

<style lang="less" scoped>
.item {
  margin: 10px 20px;
}
.demo-w {
  margin: 20px 0;
}
.demo-svg {
  display: inline-block;
  height: 30px;
  width: 35px;
  background-size: 100% 100%;
  background-image: url('../https://dqloa7ej5.lightyy.com/images/lightui/gift.png');
  background-repeat: no-repeat;
}
</style>

可配置参数

字段	说明	类型	默认值
value	显示的内容	String	-
max	value为数值时，最大值	Number	10000
zIndex	徽标的z-index值	Number	10
isDot	是否为小点	Boolean	false
hidden	是否隐藏	Boolean	false
top	上下偏移量，支持单位设置，可设置为：5px、5rem等	String	0
right	左右偏移量，支持单位设置，可设置为：5px、5rem等	String	0