graceNvueProgressButton.vue 964 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <view class="graceProgressButton" :style="{height:height+'rpx', borderRadius:borderRadius, backgroundColor:background}">
  3. <text
  4. :style="{fontSize:fontSize+'rpx', color:color, lineHeight:height+'rpx', textAlign:'center'}">{{val > 0 && val < 100 ? progressText + val + '%' : buttonText}}</text>
  5. </view>
  6. </template>
  7. <script>
  8. export default{
  9. props:{
  10. height : {
  11. type : Number,
  12. default : 80
  13. },
  14. fontSize : {
  15. type : Number,
  16. default : 30
  17. },
  18. val : {
  19. type : Number,
  20. default : 0
  21. },
  22. buttonText : {
  23. type : String,
  24. default : ""
  25. },
  26. color : {
  27. type : String,
  28. default : "#FFFFFF"
  29. },
  30. background:{
  31. type : String,
  32. default : "#5CC72F"
  33. },
  34. borderRadius : {
  35. type : String,
  36. default : "6rpx"
  37. },
  38. progressText : {
  39. type : String,
  40. default : "已下载 : "
  41. }
  42. }
  43. }
  44. </script>
  45. <style scoped>
  46. .graceProgressButton{border-radius:0rpx; text-align:center;}
  47. </style>