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.

215 lines
5.3 KiB

3 years ago
  1. <template>
  2. <view v-if="show" class="u-badge" :class="[
  3. isDot ? 'u-badge-dot' : '',
  4. size == 'mini' ? 'u-badge-mini' : '',
  5. type ? 'u-badge--bg--' + type : ''
  6. ]" :style="[{
  7. top: offset[0] + 'rpx',
  8. right: offset[1] + 'rpx',
  9. fontSize: fontSize + 'rpx',
  10. position: absolute ? 'absolute' : 'static',
  11. color: color,
  12. backgroundColor: bgColor
  13. }, boxStyle]"
  14. >
  15. {{showText}}
  16. </view>
  17. </template>
  18. <script>
  19. /**
  20. * badge 角标
  21. * @description 本组件一般用于展示头像的地方如个人中心或者评论列表页的用户头像展示等场所
  22. * @tutorial https://www.uviewui.com/components/badge.html
  23. * @property {String Number} count 展示的数字大于 overflowCount 时显示为 ${overflowCount}+为0且show-zero为false时隐藏
  24. * @property {Boolean} is-dot 不展示数字只有一个小点默认false
  25. * @property {Boolean} absolute 组件是否绝对定位为true时offset参数才有效默认true
  26. * @property {String Number} overflow-count 展示封顶的数字值默认99
  27. * @property {String} type 使用预设的背景颜色默认error
  28. * @property {Boolean} show-zero 当数值为 0 是否展示 Badge默认false
  29. * @property {String} size Badge的尺寸设为mini会得到小一号的Badge默认default
  30. * @property {Array} offset 设置badge的位置偏移格式为 [x, y]也即设置的为top和right的值单位rpxabsolute为true时有效默认[20, 20]
  31. * @property {String} color 字体颜色默认#ffffff
  32. * @property {String} bgColor 背景颜色优先级比type高如设置type参数会失效
  33. * @property {Boolean} is-center 组件中心点是否和父组件右上角重合优先级比offset高如设置offset参数会失效默认false
  34. * @example <u-badge type="error" count="7"></u-badge>
  35. */
  36. export default {
  37. name: 'u-badge',
  38. props: {
  39. // primary,warning,success,error,info
  40. type: {
  41. type: String,
  42. default: 'error'
  43. },
  44. // default, mini
  45. size: {
  46. type: String,
  47. default: 'default'
  48. },
  49. //是否是圆点
  50. isDot: {
  51. type: Boolean,
  52. default: false
  53. },
  54. // 显示的数值内容
  55. count: {
  56. type: [Number, String],
  57. },
  58. // 展示封顶的数字值
  59. overflowCount: {
  60. type: Number,
  61. default: 99
  62. },
  63. // 当数值为 0 时,是否展示 Badge
  64. showZero: {
  65. type: Boolean,
  66. default: false
  67. },
  68. // 位置偏移
  69. offset: {
  70. type: Array,
  71. default: () => {
  72. return [20, 20]
  73. }
  74. },
  75. // 是否开启绝对定位,开启了offset才会起作用
  76. absolute: {
  77. type: Boolean,
  78. default: true
  79. },
  80. // 字体大小
  81. fontSize: {
  82. type: [String, Number],
  83. default: '24'
  84. },
  85. // 字体演示
  86. color: {
  87. type: String,
  88. default: '#ffffff'
  89. },
  90. // badge的背景颜色
  91. bgColor: {
  92. type: String,
  93. default: ''
  94. },
  95. // 是否让badge组件的中心点和父组件右上角重合,配置的话,offset将会失效
  96. isCenter: {
  97. type: Boolean,
  98. default: false
  99. }
  100. },
  101. computed: {
  102. // 是否将badge中心与父组件右上角重合
  103. boxStyle() {
  104. let style = {};
  105. if(this.isCenter) {
  106. style.top = 0;
  107. style.right = 0;
  108. // Y轴-50%,意味着badge向上移动了badge自身高度一半,X轴50%,意味着向右移动了自身宽度一半
  109. style.transform = "translateY(-50%) translateX(50%)";
  110. } else {
  111. style.top = this.offset[0] + 'rpx';
  112. style.right = this.offset[1] + 'rpx';
  113. style.transform = "translateY(0) translateX(0)";
  114. }
  115. // 如果尺寸为mini,后接上scal()
  116. if(this.size == 'mini') {
  117. style.transform = style.transform + " scale(0.8)";
  118. }
  119. return style;
  120. },
  121. // isDot类型时,不显示文字
  122. showText() {
  123. if(this.isDot) return '';
  124. else {
  125. if(this.count > this.overflowCount) return `${this.overflowCount}+`;
  126. else return this.count;
  127. }
  128. },
  129. // 是否显示组件
  130. show() {
  131. // 如果count的值为0,并且showZero设置为false,不显示组件
  132. if(this.count == 0 && this.showZero == false) return false;
  133. else return true;
  134. }
  135. }
  136. }
  137. </script>
  138. <style lang="scss" scoped>
  139. @import "../../libs/css/style.components.scss";
  140. .u-badge {
  141. /* #ifndef APP-NVUE */
  142. display: inline-flex;
  143. /* #endif */
  144. justify-content: center;
  145. align-items: center;
  146. line-height: 24rpx;
  147. padding: 4rpx 8rpx;
  148. border-radius: 100rpx;
  149. z-index: 9;
  150. &--bg--primary {
  151. background-color: $u-type-primary;
  152. }
  153. &--bg--error {
  154. background-color: $u-type-error;
  155. }
  156. &--bg--success {
  157. background-color: $u-type-success;
  158. }
  159. &--bg--info {
  160. background-color: $u-type-info;
  161. }
  162. &--bg--warning {
  163. background-color: $u-type-warning;
  164. }
  165. }
  166. .u-badge-dot {
  167. height: 16rpx;
  168. width: 16rpx;
  169. border-radius: 100rpx;
  170. line-height: 1;
  171. }
  172. .u-badge-mini {
  173. transform: scale(0.8);
  174. transform-origin: center center;
  175. }
  176. // .u-primary {
  177. // background: $u-type-primary;
  178. // color: #fff;
  179. // }
  180. // .u-error {
  181. // background: $u-type-error;
  182. // color: #fff;
  183. // }
  184. // .u-warning {
  185. // background: $u-type-warning;
  186. // color: #fff;
  187. // }
  188. // .u-success {
  189. // background: $u-type-success;
  190. // color: #fff;
  191. // }
  192. // .u-black {
  193. // background: #585858;
  194. // color: #fff;
  195. // }
  196. .u-info {
  197. background-color: $u-type-info;
  198. color: #fff;
  199. }
  200. </style>