lc-badge

徽标组件，可实现消息提醒等功能，一般集成在cell中或者底部导航栏，提醒用户有未处理消息

效果

使用方法

<template>
  <div class="demo">
    <scroller>
      <title title="lc-badge"></title>
      <category title="徽标组件"></category>
      <lc-cell label="消息"
                title="[恭喜发财，大吉大利]"
                :link="link"
                :has-bottom-border="false"
                @LcCellClicked="LcCellClicked"
                :has-margin="false">
                  <lc-badge slot='value'></lc-badge>
      </lc-cell>
      <lc-cell label="订单"
                title="未处理"
                :link="link"
                :has-top-border="false"
                :has-bottom-border="false"
                @LcCellClicked="LcCellClicked"
                :has-margin="false">
                  <lc-badge text="8" slot='value'></lc-badge>
      </lc-cell>
      <lc-cell label="发现"
                title="好友"
                :link="link"
                :has-top-border="false"
                :has-bottom-border="false"
                @LcCellClicked="LcCellClicked"
                :has-margin="false">
                  <lc-badge text="99+" slot='value'></lc-badge>
      </lc-cell>
      <lc-cell label="发现"
                title="好友"
                :link="link"
                :has-top-border="false"
                @LcCellClicked="LcCellClicked"
                :has-margin="false">
                  <lc-badge text="NEW" slot='value'></lc-badge>
      </lc-cell>

    </scroller>
  </div>
</template>

<script>
    import Title from 'lighting-ui/packages/_mods/title.vue';
    import Category from 'lighting-ui/packages/_mods/category.vue';
    import LcBadge from 'lighting-ui/packages/lc-badge';
    import LcCell from 'lighting-ui/packages/lc-cell';

    export default {
        components: { LcBadge, LcCell, Title, Category },
        data(){
            return {
                link: '#/index'
            }
        },
        methods:{
            LcCellClicked(){
                console.log('clicked');
            }
        }
    }
</script>

可配置参数

Prop	Type	Required	Default	Description
text	string	N	-	徽标中的文字

• *1：没有传入文字，徽标是圆点样式。
• *2：单字符与多字符的徽标样式不同。