badge.nvue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">直角边形状</text>
  5. <view class="u-demo-block__content">
  6. <view class="u-page__tag-item">
  7. <u-badge
  8. :value="1500"
  9. shape="horn"
  10. ></u-badge>
  11. </view>
  12. </view>
  13. </view>
  14. <view class="u-demo-block">
  15. <text class="u-demo-block__title">徽标数显示方式</text>
  16. <view class="u-demo-block__content">
  17. <view class="u-page__tag-item">
  18. <u-badge
  19. :value="5132"
  20. numberType="ellipsis"
  21. ></u-badge>
  22. </view>
  23. <view class="u-page__tag-item">
  24. <u-badge
  25. :value="1011"
  26. numberType="overflow"
  27. ></u-badge>
  28. </view>
  29. <view class="u-page__tag-item">
  30. <u-badge
  31. :value="1500"
  32. numberType="limit"
  33. ></u-badge>
  34. </view>
  35. <view class="u-page__tag-item">
  36. <u-badge
  37. :value="45187"
  38. numberType="limit"
  39. ></u-badge>
  40. </view>
  41. </view>
  42. </view>
  43. <view class="u-demo-block">
  44. <text class="u-demo-block__title">显示圆点</text>
  45. <view class="u-demo-block__content">
  46. <view class="u-page__tag-item">
  47. <u-badge
  48. :value="1011"
  49. numberType="overflow"
  50. isDot
  51. >
  52. </u-badge>
  53. </view>
  54. </view>
  55. </view>
  56. <view class="u-demo-block">
  57. <text class="u-demo-block__title">自定义主题</text>
  58. <view class="u-demo-block__content">
  59. <view class="u-page__tag-item">
  60. <u-badge
  61. :value="9"
  62. type="error"
  63. >
  64. </u-badge>
  65. </view>
  66. <view class="u-page__tag-item">
  67. <u-badge
  68. :value="9"
  69. type="warning"
  70. >
  71. </u-badge>
  72. </view>
  73. <view class="u-page__tag-item">
  74. <u-badge
  75. :value="9"
  76. type="success"
  77. >
  78. </u-badge>
  79. </view>
  80. <view class="u-page__tag-item">
  81. <u-badge
  82. :value="9"
  83. type="primary"
  84. >
  85. </u-badge>
  86. </view>
  87. </view>
  88. </view>
  89. <view class="u-demo-block">
  90. <text class="u-demo-block__title">反转色</text>
  91. <view class="u-demo-block__content">
  92. <view class="u-page__tag-item">
  93. <u-badge
  94. :value="9"
  95. type="error"
  96. inverted
  97. >
  98. </u-badge>
  99. </view>
  100. <view class="u-page__tag-item">
  101. <u-badge
  102. :value="1532"
  103. inverted
  104. type="warning"
  105. >
  106. </u-badge>
  107. </view>
  108. <view class="u-page__tag-item">
  109. <u-badge
  110. :value="12"
  111. inverted
  112. type="success"
  113. >
  114. </u-badge>
  115. </view>
  116. <view class="u-page__tag-item">
  117. <u-badge
  118. :value="999"
  119. inverted
  120. type="primary"
  121. >
  122. </u-badge>
  123. </view>
  124. </view>
  125. </view>
  126. </view>
  127. </template>
  128. <script>
  129. export default {
  130. data() {
  131. return {}
  132. }
  133. }
  134. </script>
  135. <style lang="scss">
  136. .box {
  137. justify-content: space-between;
  138. }
  139. .u-page__tag-item {
  140. margin-right: 40px;
  141. margin-top: 10px;
  142. }
  143. .badge-box {
  144. width: 45px;
  145. height: 45px;
  146. border-top-left-radius: 3px;
  147. border-top-right-radius: 3px;
  148. border-bottom-left-radius: 3px;
  149. border-bottom-right-radius: 3px;
  150. background-color: #E6E6E6;
  151. }
  152. .u-demo-block__content {
  153. flex-direction: row;
  154. flex-wrap: wrap;
  155. align-items: center;
  156. }
  157. </style>