wxc-badge

默认姿势

<!-- in your page -->
<template>
  <view class="user">
    <image class="user__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_21c2fgdl406e80id5fa5hdckkh804_356x356.png"></image>
    <wxc-badge class="user__un-read-msg-count">9</wxc-badge>
  </view>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-badge': '@minui/wxc-badge'
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
  .user {
    width: 100rpx;
    height: 100rpx;
    position: relative;
  }
  .user__avatar {
    display: block;
    width: 100rpx;
    border-radius: 50%;
  }
  .user__un-read-msg-count {
    position: absolute;
    top: -16rpx;
  }
</style>

红点模式

弱提示，显示为一个红点

最大值边界

仅对 value 传值有效

<template>
  <view class="user">
    <image class="user__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_20e8ac6bcjb67f9i8b88j2aiiil03_200x200.jpg"></image>
    <wxc-badge class="user__un-read-msg-count" max="99" value="230"></wxc-badge>
  </view>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-badge': '@minui/wxc-badge'
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
  .user {
    width: 100rpx;
    height: 100rpx;
    position: relative;
  }
  .user__avatar {
    display: block;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }
  .user__un-read-msg-count {
    position: absolute;
    right: -18rpx;
</style>

value 传值

优先级高于标签内嵌套值

<template>
  <view class="user">
    <image class="user__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_21c2fgdl406e80id5fa5hdckkh804_356x356.png"></image>
    <wxc-badge class="user__un-read-msg-count" value="100"></wxc-badge>
  </view>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-badge': '@minui/wxc-badge'
    }
  },
  data: {},
  methods: {}
}
</script>
<style>
  .user {
    width: 100rpx;
    height: 100rpx;
    position: relative;
  }
  .user__avatar {
    display: block;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }
  .user__un-read-msg-count {
    position: absolute;
    top: -16rpx;
    right: -18rpx;
  }

Badge【props】

v1.0.2（2017.11.02）

• update .npmignore

v1.0.1（2017.10.24）