index.js 3.1 KB

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