wxc-badge

MinUI 小程序组件 - 徽章

Install

  1. $ min install @minui/wxc-badge

Demos

默认姿势

徽章 badge - 图1

  2. <!-- in your page -->
  3. <template>
  5.   <view class="user">
  6.     <image class="user__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_21c2fgdl406e80id5fa5hdckkh804_356x356.png"></image>
  7.     <wxc-badge class="user__un-read-msg-count">9</wxc-badge>
  8.   </view>
  10. </template>
  12. <script>
  13. export default {
  14.   config: {
  15.     usingComponents: {
  16.       'wxc-badge': '@minui/wxc-badge'
  17.     }
  18.   },
  19.   data: {},
  20.   methods: {}
  21. }
  22. </script>
  24. <style>
  25.   .user {
  26.     width: 100rpx;
  27.     height: 100rpx;
  28.     position: relative;
  29.   }
  30.   .user__avatar {
  31.     display: block;
  32.     width: 100rpx;
  33.     height: 100rpx;
  34.     border-radius: 50%;
  35.   }
  36.   .user__un-read-msg-count {
  37.     position: absolute;
  38.     top: -16rpx;
  39.     right: -8rpx;
  40.   }
  41. </style>

红点模式

弱提示，显示为一个红点

徽章 badge - 图2

  1. <template>
  3.   <view class="message">
  4.     <image class="message__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_7i7cf28a75h4jac3hidkc4c3j4e7i_200x200.png"></image>
  5.     <wxc-badge class="message__badge" type="dot">30</wxc-badge>
  6.   </view>
  8. </template>
  10. <script>
  11. export default {
  12.   config: {
  13.     usingComponents: {
  14.       'wxc-badge': '@minui/wxc-badge'
  15.     }
  16.   },
  17.   data: {},
  18.   methods: {}
  19. }
  20. </script>
  22. <style>
  23.   .message {
  24.     width: 100rpx;
  25.     height: 100rpx;
  26.     position: relative;
  27.   }
  28.   .message__avatar {
  29.     display: block;
  30.     width: 100rpx;
  31.     height: 100rpx;
  32.   }
  33.   .message__badge {
  34.     position: absolute;
  35.     top: -20rpx;
  36.     right: -2rpx;
  37.   }
  38. </style>

最大值边界

仅对 value 传值有效

徽章 badge - 图3

  1. <template>
  2.   <view class="user">
  3.     <image class="user__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_20e8ac6bcjb67f9i8b88j2aiiil03_200x200.jpg"></image>
  4.     <wxc-badge class="user__un-read-msg-count" max="99" value="230"></wxc-badge>
  5.   </view>
  6. </template>
  8. <script>
  9. export default {
  10.   config: {
  11.     usingComponents: {
  12.       'wxc-badge': '@minui/wxc-badge'
  13.     }
  14.   },
  15.   data: {},
  16.   methods: {}
  17. }
  18. </script>
  20. <style>
  21.   .user {
  22.     width: 100rpx;
  23.     height: 100rpx;
  24.     position: relative;
  25.   }
  26.   .user__avatar {
  27.     display: block;
  28.     width: 100rpx;
  29.     height: 100rpx;
  30.     border-radius: 50%;
  31.   }
  32.   .user__un-read-msg-count {
  33.     position: absolute;
  34.     top: -16rpx;
  35.     right: -18rpx;
  36.   }
  37. </style>

个性化支持

徽章 badge - 图4

  1. <template>
  2.   <view class="message">
  3.     <image class="message__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_7i7cf28a75h4jac3hidkc4c3j4e7i_200x200.png"></image>
  4.     <wxc-badge class="message__badge">new</wxc-badge>
  5.   </view>
  6. </template>
  8. <script>
  9. export default {
  10.   config: {
  11.     usingComponents: {
  12.       'wxc-badge': '@minui/wxc-badge'
  13.     }
  14.   },
  15.   data: {},
  16.   methods: {}
  17. }
  18. </script>
  20. <style>
  21.   .message {
  22.     width: 100rpx;
  23.     height: 100rpx;
  24.     position: relative;
  25.   }
  26.   .message__avatar {
  27.     display: block;
  28.     width: 100rpx;
  29.     height: 100rpx;
  30.   }
  31.   .message__badge {
  32.     position: absolute;
  33.     top: -16rpx;
  34.     right: -18rpx;
  35.   }
  36. </style>

value 传值

优先级高于标签内嵌套值

徽章 badge - 图5

  1. <template>
  2.   <view class="user">
  3.     <image class="user__avatar" src="https://s10.mogucdn.com/mlcdn/c45406/171019_21c2fgdl406e80id5fa5hdckkh804_356x356.png"></image>
  4.     <wxc-badge class="user__un-read-msg-count" value="100"></wxc-badge>
  5.   </view>
  6. </template>
  8. <script>
  9. export default {
  10.   config: {
  11.     usingComponents: {
  12.       'wxc-badge': '@minui/wxc-badge'
  13.     }
  14.   },
  15.   data: {},
  16.   methods: {}
  17. }
  18. </script>
  20. <style>
  21.   .user {
  22.     width: 100rpx;
  23.     height: 100rpx;
  24.     position: relative;
  25.   }
  26.   .user__avatar {
  27.     display: block;
  28.     width: 100rpx;
  29.     height: 100rpx;
  30.     border-radius: 50%;
  31.   }
  32.   .user__un-read-msg-count {
  33.     position: absolute;
  34.     top: -16rpx;
  35.     right: -18rpx;
  36.   }
  37. </style>

API

Badge【props】

属性描述
value[可选] 设置数值，优先级会高于标签内嵌套值
max[可选] 设置最大边界，越界数值显示为 maxVal+
type[可选] 设置标记类型，职位 dot 显示为弱提示的圆点
地址
badge 组件文档 https://meili.github.io/min/docs/minui/index.html#badge
badge 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-badge
MinUI 组件库 https://github.com/meili/minui

Preview

badge

ChangeLog

v1.0.2（2017.11.02）

  • update .npmignore

v1.0.1（2017.10.24）

  • 初始版本