学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

171 lines
5.1 KiB

1 year ago
  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>