progress.nvue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  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. <u-line-progress :percentage="percentage1">
  7. </u-line-progress>
  8. </view>
  9. </view>
  10. <view class="u-demo-block">
  11. <text class="u-demo-block__title">不显示百分比</text>
  12. <view class="u-demo-block__content">
  13. <u-line-progress
  14. :showText="false"
  15. :percentage="percentage2"
  16. >
  17. </u-line-progress>
  18. </view>
  19. </view>
  20. <view class="u-demo-block">
  21. <text class="u-demo-block__title">自定义高度</text>
  22. <view class="u-demo-block__content">
  23. <u-line-progress
  24. height="8"
  25. :showText="false"
  26. :percentage="percentage3"
  27. >
  28. </u-line-progress>
  29. </view>
  30. </view>
  31. <view class="u-demo-block">
  32. <text class="u-demo-block__title">自定义颜色</text>
  33. <view class="u-demo-block__content">
  34. <u-line-progress
  35. height="8"
  36. :showText="false"
  37. :percentage="percentage4"
  38. activeColor="#3c9cff"
  39. inactiveColor="#f3f4f6"
  40. >
  41. </u-line-progress>
  42. </view>
  43. </view>
  44. <view
  45. class="u-demo-block"
  46. v-if="!androidNvue"
  47. >
  48. <text class="u-demo-block__title">自定义样式(不支持安卓环境的nvue)</text>
  49. <view class="u-demo-block__content">
  50. <u-line-progress
  51. height="8"
  52. :showText="false"
  53. :percentage="percentage5"
  54. activeColor="#3c9cff"
  55. inactiveColor="#f3f4f6"
  56. >
  57. <text class="u-percentage-slot">{{percentage4}}%</text>
  58. </u-line-progress>
  59. </view>
  60. </view>
  61. <view class="u-demo-block">
  62. <text class="u-demo-block__title">手动加减</text>
  63. <view class="u-demo-block__content">
  64. <u-line-progress
  65. height="8"
  66. :showText="false"
  67. :percentage="percentage6"
  68. activeColor="#3c9cff"
  69. inactiveColor="#f3f4f6"
  70. >
  71. </u-line-progress>
  72. <view class="button-group">
  73. <view class="button-group__circle" hover-class="u-hover-class" @click="computedWidth('minus')">
  74. <text class="button-group__circle__text">减少</text>
  75. </view>
  76. <view class="button-group__circle" hover-class="u-hover-class" @click="computedWidth('plus')">
  77. <text class="button-group__circle__text">增加</text>
  78. </view>
  79. </view>
  80. </view>
  81. </view>
  82. </view>
  83. </template>
  84. <script>
  85. export default {
  86. data() {
  87. return {
  88. androidNvue: false,
  89. percentage1: 30,
  90. percentage2: 40,
  91. percentage3: 50,
  92. percentage4: 60,
  93. percentage5: 70,
  94. percentage6: 50,
  95. }
  96. },
  97. onLoad() {
  98. // #ifdef APP-NVUE
  99. this.androidNvue = uni.$u.os() === 'android'
  100. // #endif
  101. uni.$u.sleep(2500).then(() => {
  102. this.percentage1 = 120
  103. })
  104. },
  105. methods: {
  106. computedWidth(type) {
  107. if(type === 'plus') {
  108. this.percentage6 = uni.$u.range(0, 100, this.percentage6 + 10)
  109. } else {
  110. this.percentage6 = uni.$u.range(0, 100, this.percentage6 - 10)
  111. }
  112. }
  113. },
  114. }
  115. </script>
  116. <style lang="scss">
  117. .u-page {}
  118. .u-percentage-slot {
  119. padding: 1px 5px;
  120. background-color: $u-warning;
  121. color: #fff;
  122. border-radius: 100px;
  123. font-size: 10px;
  124. margin-right: -5px;
  125. }
  126. .u-demo-block__content {
  127. flex-direction: column !important;
  128. flex-wrap: nowrap;
  129. align-items: stretch;
  130. }
  131. .button-group {
  132. @include flex;
  133. justify-content: center;
  134. &__circle {
  135. width: 50px;
  136. height: 50px;
  137. background-color: #dbfbdb;
  138. border-radius: 100px;
  139. justify-content: center;
  140. align-items: center;
  141. margin: 30px 30px;
  142. &__text {
  143. color: rgb(25, 190, 107);
  144. font-size: 13px;
  145. }
  146. }
  147. }
  148. </style>