u-badge.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <text
  3. v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
  4. :class="[isDot ? 'u-badge--dot' : 'u-badge--not-dot', inverted && 'u-badge--inverted', shape === 'horn' && 'u-badge--horn', `u-badge--${type}${inverted ? '--inverted' : ''}`]"
  5. :style="[$u.addStyle(customStyle), badgeStyle]"
  6. class="u-badge"
  7. >{{ isDot ? '' :showValue }}</text>
  8. </template>
  9. <script>
  10. import props from './props.js';
  11. /**
  12. * badge 徽标数
  13. * @description 该组件一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。
  14. * @tutorial https://uviewui.com/components/badge.html
  15. *
  16. * @property {Boolean} isDot 是否显示圆点 (默认 false )
  17. * @property {String | Number} value 显示的内容
  18. * @property {Boolean} show 是否显示 (默认 true )
  19. * @property {String | Number} max 最大值,超过最大值会显示 '{max}+' (默认999)
  20. * @property {String} type 主题类型,error|warning|success|primary (默认 'error' )
  21. * @property {Boolean} showZero 当数值为 0 时,是否展示 Badge (默认 false )
  22. * @property {String} bgColor 背景颜色,优先级比type高,如设置,type参数会失效
  23. * @property {String} color 字体颜色 (默认 '#ffffff' )
  24. * @property {String} shape 徽标形状,circle-四角均为圆角,horn-左下角为直角 (默认 'circle' )
  25. * @property {String} numberType 设置数字的显示方式,overflow|ellipsis|limit (默认 'overflow' )
  26. * @property {Array}} offset 设置badge的位置偏移,格式为 [x, y],也即设置的为top和right的值,absolute为true时有效
  27. * @property {Boolean} inverted 是否反转背景和字体颜色(默认 false )
  28. * @property {Boolean} absolute 是否绝对定位(默认 false )
  29. * @property {Object} customStyle 定义需要用到的外部样式
  30. * @example <u-badge :type="type" :count="count"></u-badge>
  31. */
  32. export default {
  33. name: 'u-badge',
  34. mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
  35. computed: {
  36. // 是否将badge中心与父组件右上角重合
  37. boxStyle() {
  38. let style = {};
  39. return style;
  40. },
  41. // 整个组件的样式
  42. badgeStyle() {
  43. const style = {}
  44. if(this.color) {
  45. style.color = this.color
  46. }
  47. if (this.bgColor && !this.inverted) {
  48. style.backgroundColor = this.bgColor
  49. }
  50. if (this.absolute) {
  51. style.position = 'absolute'
  52. // 如果有设置offset参数
  53. if(this.offset.length) {
  54. // top和right分为为offset的第一个和第二个值,如果没有第二个值,则right等于top
  55. const top = this.offset[0]
  56. const right = this.offset[1] || top
  57. style.top = uni.$u.addUnit(top)
  58. style.right = uni.$u.addUnit(right)
  59. }
  60. }
  61. return style
  62. },
  63. showValue() {
  64. switch (this.numberType) {
  65. case "overflow":
  66. return Number(this.value) > Number(this.max) ? this.max + "+" : this.value
  67. break;
  68. case "ellipsis":
  69. return Number(this.value) > Number(this.max) ? "..." : this.value
  70. break;
  71. case "limit":
  72. return Number(this.value) > 999 ? Number(this.value) >= 9999 ?
  73. Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value /
  74. 1e3 * 100) / 100 + "k" : this.value
  75. break;
  76. default:
  77. return Number(this.value)
  78. }
  79. },
  80. }
  81. }
  82. </script>
  83. <style lang="scss" scoped>
  84. @import "../../libs/css/components.scss";
  85. $u-badge-primary: $u-primary !default;
  86. $u-badge-error: $u-error !default;
  87. $u-badge-success: $u-success !default;
  88. $u-badge-info: $u-info !default;
  89. $u-badge-warning: $u-warning !default;
  90. $u-badge-dot-radius: 100px !default;
  91. $u-badge-dot-size: 8px !default;
  92. $u-badge-dot-right: 4px !default;
  93. $u-badge-dot-top: 0 !default;
  94. $u-badge-text-font-size: 11px !default;
  95. $u-badge-text-right: 10px !default;
  96. $u-badge-text-padding: 2px 5px !default;
  97. $u-badge-text-align: center !default;
  98. $u-badge-text-color: #FFFFFF !default;
  99. .u-badge {
  100. border-top-right-radius: $u-badge-dot-radius;
  101. border-top-left-radius: $u-badge-dot-radius;
  102. border-bottom-left-radius: $u-badge-dot-radius;
  103. border-bottom-right-radius: $u-badge-dot-radius;
  104. @include flex;
  105. line-height: $u-badge-text-font-size;
  106. text-align: $u-badge-text-align;
  107. font-size: $u-badge-text-font-size;
  108. color: $u-badge-text-color;
  109. &--dot {
  110. height: $u-badge-dot-size;
  111. width: $u-badge-dot-size;
  112. }
  113. &--inverted {
  114. font-size: 13px;
  115. }
  116. &--not-dot {
  117. padding: $u-badge-text-padding;
  118. }
  119. &--horn {
  120. border-bottom-left-radius: 0;
  121. }
  122. &--primary {
  123. background-color: $u-badge-primary;
  124. }
  125. &--primary--inverted {
  126. color: $u-badge-primary;
  127. }
  128. &--error {
  129. background-color: $u-badge-error;
  130. }
  131. &--error--inverted {
  132. color: $u-badge-error;
  133. }
  134. &--success {
  135. background-color: $u-badge-success;
  136. }
  137. &--success--inverted {
  138. color: $u-badge-success;
  139. }
  140. &--info {
  141. background-color: $u-badge-info;
  142. }
  143. &--info--inverted {
  144. color: $u-badge-info;
  145. }
  146. &--warning {
  147. background-color: $u-badge-warning;
  148. }
  149. &--warning--inverted {
  150. color: $u-badge-warning;
  151. }
  152. }
  153. </style>