index.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = void 0;
  4. var _utils = require("../utils");
  5. var _touch = require("../mixins/touch");
  6. var _event = require("../utils/event");
  7. var _use = (0, _utils.use)('slider'),
  8. sfc = _use[0],
  9. bem = _use[1];
  10. var _default = sfc({
  11. mixins: [_touch.TouchMixin],
  12. props: {
  13. min: Number,
  14. value: Number,
  15. disabled: Boolean,
  16. vertical: Boolean,
  17. activeColor: String,
  18. inactiveColor: String,
  19. max: {
  20. type: Number,
  21. "default": 100
  22. },
  23. step: {
  24. type: Number,
  25. "default": 1
  26. },
  27. barHeight: {
  28. type: String,
  29. "default": '2px'
  30. }
  31. },
  32. methods: {
  33. onTouchStart: function onTouchStart(event) {
  34. if (this.disabled) return;
  35. this.touchStart(event);
  36. this.startValue = this.format(this.value);
  37. },
  38. onTouchMove: function onTouchMove(event) {
  39. (0, _event.preventDefault)(event, true);
  40. if (this.disabled) return;
  41. this.touchMove(event);
  42. var rect = this.$el.getBoundingClientRect();
  43. var delta = this.vertical ? this.deltaY : this.deltaX;
  44. var total = this.vertical ? rect.height : rect.width;
  45. var diff = delta / total * 100;
  46. this.newValue = this.startValue + diff;
  47. this.updateValue(this.newValue);
  48. },
  49. onTouchEnd: function onTouchEnd() {
  50. if (this.disabled) return;
  51. this.updateValue(this.newValue, true);
  52. },
  53. onClick: function onClick(event) {
  54. event.stopPropagation();
  55. if (this.disabled) return;
  56. var rect = this.$el.getBoundingClientRect();
  57. var delta = this.vertical ? event.clientY - rect.top : event.clientX - rect.left;
  58. var total = this.vertical ? rect.height : rect.width;
  59. var value = delta / total * 100;
  60. this.updateValue(value, true);
  61. },
  62. updateValue: function updateValue(value, end) {
  63. value = this.format(value);
  64. this.$emit('input', value);
  65. if (end) {
  66. this.$emit('change', value);
  67. }
  68. },
  69. format: function format(value) {
  70. return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
  71. }
  72. },
  73. render: function render(h) {
  74. var _barStyle;
  75. var vertical = this.vertical;
  76. var style = {
  77. background: this.inactiveColor
  78. };
  79. var mainAxis = vertical ? 'height' : 'width';
  80. var crossAxis = vertical ? 'width' : 'height';
  81. var barStyle = (_barStyle = {}, _barStyle[mainAxis] = this.format(this.value) + "%", _barStyle[crossAxis] = this.barHeight, _barStyle.background = this.activeColor, _barStyle);
  82. return h("div", {
  83. "style": style,
  84. "class": bem({
  85. disabled: this.disabled,
  86. vertical: vertical
  87. }),
  88. "on": {
  89. "click": this.onClick
  90. }
  91. }, [h("div", {
  92. "class": bem('bar'),
  93. "style": barStyle
  94. }, [h("div", {
  95. "class": bem('button-wrapper'),
  96. "on": {
  97. "touchstart": this.onTouchStart,
  98. "touchmove": this.onTouchMove,
  99. "touchend": this.onTouchEnd,
  100. "touchcancel": this.onTouchEnd
  101. }
  102. }, [this.slots('button') || h("div", {
  103. "class": bem('button')
  104. })])])]);
  105. }
  106. });
  107. exports["default"] = _default;