index.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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. component_1.VantComponent({
  6. mixins: [touch_1.touch],
  7. props: {
  8. disabled: Boolean,
  9. useButtonSlot: Boolean,
  10. activeColor: String,
  11. inactiveColor: String,
  12. max: {
  13. type: Number,
  14. value: 100
  15. },
  16. min: {
  17. type: Number,
  18. value: 0
  19. },
  20. step: {
  21. type: Number,
  22. value: 1
  23. },
  24. value: {
  25. type: Number,
  26. value: 0
  27. },
  28. barHeight: {
  29. type: String,
  30. value: '2px'
  31. }
  32. },
  33. watch: {
  34. value: function (value) {
  35. this.updateValue(value, false);
  36. }
  37. },
  38. created: function () {
  39. this.updateValue(this.data.value);
  40. },
  41. methods: {
  42. onTouchStart: function (event) {
  43. if (this.data.disabled)
  44. return;
  45. this.touchStart(event);
  46. this.startValue = this.format(this.data.value);
  47. },
  48. onTouchMove: function (event) {
  49. var _this = this;
  50. if (this.data.disabled)
  51. return;
  52. this.touchMove(event);
  53. this.getRect('.van-slider').then(function (rect) {
  54. var diff = _this.deltaX / rect.width * 100;
  55. _this.newValue = _this.startValue + diff;
  56. _this.updateValue(_this.newValue, false, true);
  57. });
  58. },
  59. onTouchEnd: function () {
  60. if (this.data.disabled)
  61. return;
  62. this.updateValue(this.newValue, true);
  63. },
  64. onClick: function (event) {
  65. var _this = this;
  66. if (this.data.disabled)
  67. return;
  68. this.getRect('.van-slider').then(function (rect) {
  69. var value = (event.detail.x - rect.left) / rect.width * 100;
  70. _this.updateValue(value, true);
  71. });
  72. },
  73. updateValue: function (value, end, drag) {
  74. value = this.format(value);
  75. this.set({
  76. value: value,
  77. barStyle: "width: " + value + "%; height: " + this.data.barHeight + ";"
  78. });
  79. if (drag) {
  80. this.$emit('drag', { value: value });
  81. }
  82. if (end) {
  83. this.$emit('change', value);
  84. }
  85. },
  86. format: function (value) {
  87. var _a = this.data, max = _a.max, min = _a.min, step = _a.step;
  88. return Math.round(Math.max(min, Math.min(value, max)) / step) * step;
  89. }
  90. }
  91. });