graceNubmerAnimate.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <text :style="{fontSize:fontSize, fontWeight:fontWeight, color:color, lineHeight:lineHeight}">{{numAnimate}}</text>
  3. </template>
  4. <script>
  5. export default{
  6. props:{
  7. num : {
  8. type : Number,
  9. default : 0
  10. },
  11. stepNumber : {
  12. type : Number,
  13. default : 50
  14. },
  15. timer : {
  16. type : Number,
  17. default : 800
  18. },
  19. keepInt : {
  20. type : Boolean,
  21. default : false
  22. },
  23. fontSize:{
  24. type : String,
  25. default : '28rpx'
  26. },
  27. color:{
  28. type : String,
  29. default : '#333333'
  30. },
  31. lineHeight:{
  32. type : String,
  33. default : '50rpx'
  34. },
  35. fontWeight:{
  36. type : String,
  37. default : '400'
  38. }
  39. },
  40. data() {
  41. return {
  42. numAnimate : 0,
  43. intervalId : null
  44. }
  45. },
  46. created:function(){
  47. let timer = this.timer / this.stepNumber;
  48. let step = Math.floor((this.num / this.stepNumber) * 100) / 100;
  49. this.intervalId = setInterval(() => {
  50. // 正值
  51. if(this.num >= 0){
  52. if(this.numAnimate >= this.num){
  53. this.numAnimate = this.num;
  54. clearInterval(this.intervalId);
  55. return;
  56. }
  57. }else{
  58. if(this.numAnimate <= this.num){
  59. this.numAnimate = this.num;
  60. clearInterval(this.intervalId);
  61. return;
  62. }
  63. }
  64. let res = this.numAnimate + step;
  65. this.numAnimate = this.keepInt ? parseInt(res) : Math.floor(res * 100) / 100;
  66. }, timer);
  67. }
  68. }
  69. </script>
  70. <style scoped>
  71. </style>