選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

u-badge.vue 5.2 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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的值,单位rpx。absolute为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. display: inline-flex;
  142. justify-content: center;
  143. align-items: center;
  144. line-height: 24rpx;
  145. padding: 4rpx 8rpx;
  146. border-radius: 100rpx;
  147. &--bg--primary {
  148. background-color: $u-type-primary;
  149. }
  150. &--bg--error {
  151. background-color: $u-type-error;
  152. }
  153. &--bg--success {
  154. background-color: $u-type-success;
  155. }
  156. &--bg--info {
  157. background-color: $u-type-info;
  158. }
  159. &--bg--warning {
  160. background-color: $u-type-warning;
  161. }
  162. }
  163. .u-badge-dot {
  164. height: 16rpx;
  165. width: 16rpx;
  166. border-radius: 100rpx;
  167. line-height: 1;
  168. }
  169. .u-badge-mini {
  170. transform: scale(0.8);
  171. transform-origin: center center;
  172. }
  173. // .u-primary {
  174. // background: $u-type-primary;
  175. // color: #fff;
  176. // }
  177. // .u-error {
  178. // background: $u-type-error;
  179. // color: #fff;
  180. // }
  181. // .u-warning {
  182. // background: $u-type-warning;
  183. // color: #fff;
  184. // }
  185. // .u-success {
  186. // background: $u-type-success;
  187. // color: #fff;
  188. // }
  189. // .u-black {
  190. // background: #585858;
  191. // color: #fff;
  192. // }
  193. .u-info {
  194. background: $u-type-info;
  195. color: #fff;
  196. }
  197. </style>