index.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. import { VantComponent } from '../common/component';
  2. import { BLUE } from '../common/color';
  3. import { getRect } from '../common/utils';
  4. VantComponent({
  5. props: {
  6. inactive: Boolean,
  7. percentage: {
  8. type: Number,
  9. observer: 'setLeft',
  10. },
  11. pivotText: String,
  12. pivotColor: String,
  13. trackColor: String,
  14. showPivot: {
  15. type: Boolean,
  16. value: true,
  17. },
  18. color: {
  19. type: String,
  20. value: BLUE,
  21. },
  22. textColor: {
  23. type: String,
  24. value: '#fff',
  25. },
  26. strokeWidth: {
  27. type: null,
  28. value: 4,
  29. },
  30. },
  31. data: {
  32. right: 0,
  33. },
  34. mounted() {
  35. this.setLeft();
  36. },
  37. methods: {
  38. setLeft() {
  39. Promise.all([
  40. getRect(this, '.van-progress'),
  41. getRect(this, '.van-progress__pivot'),
  42. ]).then(([portion, pivot]) => {
  43. if (portion && pivot) {
  44. this.setData({
  45. right: (pivot.width * (this.data.percentage - 100)) / 100,
  46. });
  47. }
  48. });
  49. },
  50. },
  51. });