Progress-Bar.vue 801 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <view>
  3. <view class="progress" :class="Type">
  4. <view class="progress-text" v-if="Vice == true">{{ Width + '%' }}</view>
  5. <view class="progress-bar" :style="{width: Width+'%'}"><view class="progress-text" v-if="Main == true">{{ Width + '%' }}</view></view>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. props: {
  12. // 进度条百分比
  13. Width: {
  14. type: Number,
  15. default: 0
  16. },
  17. // 进度条样式
  18. /*
  19. aqua
  20. copper
  21. sparkle
  22. */
  23. Type: {
  24. type: String,
  25. default: 'aqua',
  26. },
  27. // 主进度显示百分比
  28. Main: {
  29. type: Boolean,
  30. default: true,
  31. },
  32. // 副进度显示百分比
  33. Vice: {
  34. type: Boolean,
  35. default: true,
  36. },
  37. },
  38. data() {
  39. return {
  40. };
  41. },
  42. methods: {}
  43. };
  44. </script>
  45. <style>
  46. @import url('Progress-Bar.css');
  47. </style>