index.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  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. (0, component_1.VantComponent)({
  8. mixins: [touch_1.touch],
  9. props: {
  10. range: Boolean,
  11. disabled: Boolean,
  12. useButtonSlot: Boolean,
  13. activeColor: String,
  14. inactiveColor: String,
  15. max: {
  16. type: Number,
  17. value: 100,
  18. },
  19. min: {
  20. type: Number,
  21. value: 0,
  22. },
  23. step: {
  24. type: Number,
  25. value: 1,
  26. },
  27. value: {
  28. type: null,
  29. value: 0,
  30. observer: function (val) {
  31. if (val !== this.value) {
  32. this.updateValue(val);
  33. }
  34. },
  35. },
  36. vertical: Boolean,
  37. barHeight: null,
  38. },
  39. created: function () {
  40. this.updateValue(this.data.value);
  41. },
  42. methods: {
  43. onTouchStart: function (event) {
  44. var _this = this;
  45. if (this.data.disabled)
  46. return;
  47. var index = event.currentTarget.dataset.index;
  48. if (typeof index === 'number') {
  49. this.buttonIndex = index;
  50. }
  51. this.touchStart(event);
  52. this.startValue = this.format(this.value);
  53. this.newValue = this.value;
  54. if (this.isRange(this.newValue)) {
  55. this.startValue = this.newValue.map(function (val) { return _this.format(val); });
  56. }
  57. else {
  58. this.startValue = this.format(this.newValue);
  59. }
  60. this.dragStatus = 'start';
  61. },
  62. onTouchMove: function (event) {
  63. var _this = this;
  64. if (this.data.disabled)
  65. return;
  66. if (this.dragStatus === 'start') {
  67. this.$emit('drag-start');
  68. }
  69. this.touchMove(event);
  70. this.dragStatus = 'draging';
  71. (0, utils_1.getRect)(this, '.van-slider').then(function (rect) {
  72. var vertical = _this.data.vertical;
  73. var delta = vertical ? _this.deltaY : _this.deltaX;
  74. var total = vertical ? rect.height : rect.width;
  75. var diff = (delta / total) * _this.getRange();
  76. if (_this.isRange(_this.startValue)) {
  77. _this.newValue[_this.buttonIndex] =
  78. _this.startValue[_this.buttonIndex] + diff;
  79. }
  80. else {
  81. _this.newValue = _this.startValue + diff;
  82. }
  83. _this.updateValue(_this.newValue, false, true);
  84. });
  85. },
  86. onTouchEnd: function () {
  87. if (this.data.disabled)
  88. return;
  89. if (this.dragStatus === 'draging') {
  90. this.updateValue(this.newValue, true);
  91. this.$emit('drag-end');
  92. }
  93. },
  94. onClick: function (event) {
  95. var _this = this;
  96. if (this.data.disabled)
  97. return;
  98. var min = this.data.min;
  99. (0, utils_1.getRect)(this, '.van-slider').then(function (rect) {
  100. var vertical = _this.data.vertical;
  101. var touch = event.touches[0];
  102. var delta = vertical
  103. ? touch.clientY - rect.top
  104. : touch.clientX - rect.left;
  105. var total = vertical ? rect.height : rect.width;
  106. var value = Number(min) + (delta / total) * _this.getRange();
  107. if (_this.isRange(_this.value)) {
  108. var _a = _this.value, left = _a[0], right = _a[1];
  109. var middle = (left + right) / 2;
  110. if (value <= middle) {
  111. _this.updateValue([value, right], true);
  112. }
  113. else {
  114. _this.updateValue([left, value], true);
  115. }
  116. }
  117. else {
  118. _this.updateValue(value, true);
  119. }
  120. });
  121. },
  122. isRange: function (val) {
  123. var range = this.data.range;
  124. return range && Array.isArray(val);
  125. },
  126. handleOverlap: function (value) {
  127. if (value[0] > value[1]) {
  128. return value.slice(0).reverse();
  129. }
  130. return value;
  131. },
  132. updateValue: function (value, end, drag) {
  133. var _this = this;
  134. if (this.isRange(value)) {
  135. value = this.handleOverlap(value).map(function (val) { return _this.format(val); });
  136. }
  137. else {
  138. value = this.format(value);
  139. }
  140. this.value = value;
  141. var vertical = this.data.vertical;
  142. var mainAxis = vertical ? 'height' : 'width';
  143. this.setData({
  144. wrapperStyle: "\n background: ".concat(this.data.inactiveColor || '', ";\n ").concat(vertical ? 'width' : 'height', ": ").concat((0, utils_1.addUnit)(this.data.barHeight) || '', ";\n "),
  145. barStyle: "\n ".concat(mainAxis, ": ").concat(this.calcMainAxis(), ";\n left: ").concat(vertical ? 0 : this.calcOffset(), ";\n top: ").concat(vertical ? this.calcOffset() : 0, ";\n ").concat(drag ? 'transition: none;' : '', "\n "),
  146. });
  147. if (drag) {
  148. this.$emit('drag', { value: value });
  149. }
  150. if (end) {
  151. this.$emit('change', value);
  152. }
  153. if ((drag || end) && (0, version_1.canIUseModel)()) {
  154. this.setData({ value: value });
  155. }
  156. },
  157. getScope: function () {
  158. return Number(this.data.max) - Number(this.data.min);
  159. },
  160. getRange: function () {
  161. var _a = this.data, max = _a.max, min = _a.min;
  162. return max - min;
  163. },
  164. // 计算选中条的长度百分比
  165. calcMainAxis: function () {
  166. var value = this.value;
  167. var min = this.data.min;
  168. var scope = this.getScope();
  169. if (this.isRange(value)) {
  170. return "".concat(((value[1] - value[0]) * 100) / scope, "%");
  171. }
  172. return "".concat(((value - Number(min)) * 100) / scope, "%");
  173. },
  174. // 计算选中条的开始位置的偏移量
  175. calcOffset: function () {
  176. var value = this.value;
  177. var min = this.data.min;
  178. var scope = this.getScope();
  179. if (this.isRange(value)) {
  180. return "".concat(((value[0] - Number(min)) * 100) / scope, "%");
  181. }
  182. return '0%';
  183. },
  184. format: function (value) {
  185. var _a = this.data, max = _a.max, min = _a.min, step = _a.step;
  186. return Math.round(Math.max(min, Math.min(value, max)) / step) * step;
  187. },
  188. },
  189. });