progress.vue 935 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <template>
  2. <div>
  3. <nut-demoheader
  4. :name="$route.name"
  5. ></nut-demoheader>
  6. <h5>示例</h5>
  7. <h6>默认用法</h6>
  8. <nut-codebox code="<nut-progress
  9. percent='15'
  10. height='10px' />" />
  11. <div class="cont">
  12. <nut-progress percent="15" height="10px" />
  13. </div>
  14. <h6>设置高度和颜色</h6>
  15. <nut-codebox code="<nut-progress
  16. height='10px'
  17. color='#F54C12' />" />
  18. <div class="cont">
  19. <nut-progress height="10px" color="#F54C12" percent="23" />
  20. </div>
  21. <h6>显示进度数</h6>
  22. <nut-codebox code="<nut-progress height='0.25rem' percent='20' showText='out' />" />
  23. <div class="cont">
  24. <nut-progress percent="20" showText="out" height="20px" />
  25. </div>
  26. </div>
  27. </template>
  28. <script>
  29. export default {
  30. data() {
  31. return {
  32. }
  33. }
  34. }
  35. </script>
  36. <style>
  37. .cont{
  38. width: 450px;
  39. }
  40. </style>