Vuetify Vue - 始终监听滑动事件，但只返回一次值

Question

我为该项目安装了 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 && clickOffset <= trackStart + trackLength;

  var value = parseFloat(this.min) + clickPos * (this.maxValue - this.minValue);

  return {

    value: value,

    isInsideTrack: isInsideTrack

  };

},

Answer 1

addEventListener如果您使用 Vue.js，我可以建议您在您的<template>部分使用 Vue.js '事件处理'，而不是, ，例如：<div  @mousedown="moveStartMethod($event)"  @mousemove.prevent="moveMotionMethod"  @mouseup="moveEndMethod"></div>然后在你的<script>部分，你可以调用这些方法：moveStartMethod: function (event) {  ...}