index.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var component_1 = require('../common/component');
  4. var touch_1 = require('../mixins/touch');
  5. var version_1 = require('../common/version');
  6. component_1.VantComponent({
  7. mixins: [touch_1.touch],
  8. props: {
  9. disabled: Boolean,
  10. useButtonSlot: Boolean,
  11. activeColor: String,
  12. inactiveColor: String,
  13. max: {
  14. type: Number,
  15. value: 100,
  16. },
  17. min: {
  18. type: Number,
  19. value: 0,
  20. },
  21. step: {
  22. type: Number,
  23. value: 1,
  24. },
  25. value: {
  26. type: Number,
  27. value: 0,
  28. observer: function (val) {
  29. if (val !== this.value) {
  30. this.updateValue(val);
  31. }
  32. },
  33. },
  34. barHeight: {
  35. type: null,
  36. value: 2,
  37. },
  38. },
  39. created: function () {
  40. this.updateValue(this.data.value);
  41. },
  42. methods: {
  43. onTouchStart: function (event) {
  44. if (this.data.disabled) return;
  45. this.touchStart(event);
  46. this.startValue = this.format(this.value);
  47. this.dragStatus = 'start';
  48. },
  49. onTouchMove: function (event) {
  50. var _this = this;
  51. if (this.data.disabled) return;
  52. if (this.dragStatus === 'start') {
  53. this.$emit('drag-start');
  54. }
  55. this.touchMove(event);
  56. this.dragStatus = 'draging';
  57. this.getRect('.van-slider').then(function (rect) {
  58. var diff = (_this.deltaX / rect.width) * 100;
  59. _this.newValue = _this.startValue + diff;
  60. _this.updateValue(_this.newValue, false, true);
  61. });
  62. },
  63. onTouchEnd: function () {
  64. if (this.data.disabled) return;
  65. if (this.dragStatus === 'draging') {
  66. this.updateValue(this.newValue, true);
  67. this.$emit('drag-end');
  68. }
  69. },
  70. onClick: function (event) {
  71. var _this = this;
  72. if (this.data.disabled) return;
  73. var min = this.data.min;
  74. this.getRect('.van-slider').then(function (rect) {
  75. var value =
  76. ((event.detail.x - rect.left) / rect.width) * _this.getRange() + min;
  77. _this.updateValue(value, true);
  78. });
  79. },
  80. updateValue: function (value, end, drag) {
  81. value = this.format(value);
  82. var min = this.data.min;
  83. var width = ((value - min) * 100) / this.getRange() + '%';
  84. this.value = value;
  85. this.setData({
  86. barStyle:
  87. '\n width: ' +
  88. width +
  89. ';\n ' +
  90. (drag ? 'transition: none;' : '') +
  91. '\n ',
  92. });
  93. if (drag) {
  94. this.$emit('drag', { value: value });
  95. }
  96. if (end) {
  97. this.$emit('change', value);
  98. }
  99. if ((drag || end) && version_1.canIUseModel()) {
  100. this.setData({ value: value });
  101. }
  102. },
  103. getRange: function () {
  104. var _a = this.data,
  105. max = _a.max,
  106. min = _a.min;
  107. return max - min;
  108. },
  109. format: function (value) {
  110. var _a = this.data,
  111. max = _a.max,
  112. min = _a.min,
  113. step = _a.step;
  114. return Math.round(Math.max(min, Math.min(value, max)) / step) * step;
  115. },
  116. },
  117. });