Блог

Я установил плагин vuetify для проекта, чтобы использовать плагин colorpicker. Из-за особых требований мне нужно вручную изменить функцию и стиль плагина.

Плагин имеет полосу прокрутки, каждый раз, когда вы нажимаете кнопку, он возвращает текущее шестнадцатеричное значение цвета.

Теперь мне нужно сделать его скользящим, но возвращать текущее значение цвета только при отпускании.

что мне делать?

Вот как прослушивать события прокрутки

   if ('touches' in e) {
    this.app.addEventListener('touchmove', this.onMouseMove, mouseMoveOptions);//滑动
    Object(_util_helpers__WEBPACK_IMPORTED_MODULE_6__["addOnceEventListener"])(this.app, 'touchend', this.onSliderMouseUp, mouseUpOptions);
  } else {
    this.app.addEventListener('mousemove', this.onMouseMove, mouseMoveOptions);
    Object(_util_helpers__WEBPACK_IMPORTED_MODULE_6__["addOnceEventListener"])(this.app, 'mouseup', this.onSliderMouseUp, mouseUpOptions);
  }//addEventListener is a custom function,listener event just once.
  

при перемещении ползунка

  onMouseMove: function onMouseMove(e) {
      var value = this.parseMouseMove(e).value;
      this.internalValue = value;

    },
parseMouseMove: function parseMouseMove(e) {
  var start = this.vertical ? 'top' : 'left';
  var length = this.vertical ? 'height' : 'width';
  var click = this.vertical ? 'clientY' : 'clientX';

  var _a = this.$refs.track.getBoundingClientRect(),
      _b = start,
      trackStart = _a[_b],
      _c = length,
      trackLength = _a[_c];

  var clickOffset = 'touches' in e ? e.touches[0][click] : e[click]; // Can we get rid of any here?
  // It is possible for left to be NaN, force to number

  var clickPos = Math.min(Math.max((clickOffset - trackStart) / trackLength, 0), 1) || 0;
  if (this.vertical) clickPos = 1 - clickPos;
  if (this.$vuetify.rtl) clickPos = 1 - clickPos;
  var isInsideTrack = clickOffset >= trackStart amp;amp; clickOffset <= trackStart   trackLength;
  var value = parseFloat(this.min)   clickPos * (this.maxValue - this.minValue);
  return {
    value: value,
    isInsideTrack: isInsideTrack
  };
},
  

Если вы используете Vue.js , я могу порекомендовать вам использовать Vue.js «Обработка событий», вместо addEventListener того, чтобы, в вашей <template> части, как:

 <div
  @mousedown="moveStartMethod($event)"
  @mousemove.prevent="moveMotionMethod"
  @mouseup="moveEndMethod"
>
</div>
  

Затем, со своей <script> стороны, вы можете вызывать методы:

 moveStartMethod: function (event) {
  ...
},
  

дополнительная информация: https://learnvue.co/2020/01/a-vue-event-handling-cheatsheet-the-essentials / и найдите часть «Обработка модификаторов мыши»