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.

progress.vue 722 B

4 years ago
1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <template>
  2. <view
  3. :class="[
  4. size,
  5. radius ? 'radius' : '',
  6. round ? 'round' : '',
  7. striped ? 'striped' : '',
  8. active && striped ? 'active' : '',
  9. className
  10. ]"
  11. :style="style"
  12. class="cu-progress"
  13. >
  14. <view :class="[color ? 'bg-' + color : '']" :style="{ width: displayPercent + '%' }">
  15. {{ noText ? '' : displayPercent + '%' }}
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. name: 'l-progress',
  22. props: {
  23. percent: {},
  24. noText: {},
  25. color: {},
  26. radius: {},
  27. round: {},
  28. size: { default: 'df' },
  29. striped: {},
  30. active: {}
  31. },
  32. computed: {
  33. displayPercent() {
  34. return Number(this.percent) || 0
  35. }
  36. }
  37. }
  38. </script>