u-line-progress.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <view class="u-progress" :style="{
  3. borderRadius: round ? '100rpx' : 0,
  4. height: height + 'rpx',
  5. backgroundColor: inactiveColor
  6. }">
  7. <view :class="[
  8. type ? `u-type-${type}-bg` : '',
  9. striped ? 'u-striped' : '',
  10. striped && stripedActive ? 'u-striped-active' : ''
  11. ]" class="u-active" :style="[progressStyle]">
  12. <slot v-if="$slots.default || $slots.$default" />
  13. <block v-else-if="showPercent">
  14. {{percent + '%'}}
  15. </block>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. /**
  21. * lineProgress 线型进度条
  22. * @description 展示操作或任务的当前进度,比如上传文件,是一个线形的进度条。
  23. * @tutorial https://www.uviewui.com/components/lineProgress.html
  24. * @property {String Number} percent 进度条百分比值,为数值类型,0-100
  25. * @property {Boolean} round 进度条两端是否为半圆(默认true)
  26. * @property {String} type 如设置,active-color值将会失效
  27. * @property {String} active-color 进度条激活部分的颜色(默认#19be6b)
  28. * @property {String} inactive-color 进度条的底色(默认#ececec)
  29. * @property {Boolean} show-percent 是否在进度条内部显示当前的百分比值数值(默认true)
  30. * @property {String Number} height 进度条的高度,单位rpx(默认28)
  31. * @property {Boolean} striped 是否显示进度条激活部分的条纹(默认false)
  32. * @property {Boolean} striped-active 条纹是否具有动态效果(默认false)
  33. * @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress>
  34. */
  35. export default {
  36. name: "u-line-progress",
  37. props: {
  38. // 两端是否显示半圆形
  39. round: {
  40. type: Boolean,
  41. default: true
  42. },
  43. // 主题颜色
  44. type: {
  45. type: String,
  46. default: ''
  47. },
  48. // 激活部分的颜色
  49. activeColor: {
  50. type: String,
  51. default: '#19be6b'
  52. },
  53. inactiveColor: {
  54. type: String,
  55. default: '#ececec'
  56. },
  57. // 进度百分比,数值
  58. percent: {
  59. type: Number,
  60. default: 0
  61. },
  62. // 是否在进度条内部显示百分比的值
  63. showPercent: {
  64. type: Boolean,
  65. default: true
  66. },
  67. // 进度条的高度,单位rpx
  68. height: {
  69. type: [Number, String],
  70. default: 28
  71. },
  72. // 是否显示条纹
  73. striped: {
  74. type: Boolean,
  75. default: false
  76. },
  77. // 条纹是否显示活动状态
  78. stripedActive: {
  79. type: Boolean,
  80. default: false
  81. }
  82. },
  83. data() {
  84. return {
  85. }
  86. },
  87. computed: {
  88. progressStyle() {
  89. let style = {};
  90. style.width = this.percent + '%';
  91. if(this.activeColor) style.backgroundColor = this.activeColor;
  92. return style;
  93. }
  94. },
  95. methods: {
  96. }
  97. }
  98. </script>
  99. <style lang="scss" scoped>
  100. @import "../../libs/css/style.components.scss";
  101. .u-progress {
  102. overflow: hidden;
  103. height: 15px;
  104. /* #ifndef APP-NVUE */
  105. display: inline-flex;
  106. /* #endif */
  107. align-items: center;
  108. width: 100%;
  109. border-radius: 100rpx;
  110. }
  111. .u-active {
  112. width: 0;
  113. height: 100%;
  114. align-items: center;
  115. @include vue-flex;
  116. justify-items: flex-end;
  117. justify-content: space-around;
  118. font-size: 20rpx;
  119. color: #ffffff;
  120. transition: all 0.4s ease;
  121. }
  122. .u-striped {
  123. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  124. background-size: 39px 39px;
  125. }
  126. .u-striped-active {
  127. animation: progress-stripes 2s linear infinite;
  128. }
  129. @keyframes progress-stripes {
  130. 0% {
  131. background-position: 0 0;
  132. }
  133. 100% {
  134. background-position: 39px 0;
  135. }
  136. }
  137. </style>