Как использовать Vue событий мыши с api композиции? - PullRequest
Новая
       92

Как использовать Vue событий мыши с api композиции?

2 голосов
/ 20 июня 2020

Я просто пытаюсь посмотреть, как работают события @mouseup, @mousedown, @mousemove. У меня есть только div:

// html

<div class="test" @mousemove="mouseMove" @mousedown="mouseDown" @mouseup="mouseUp">{{x}}</div>

// CSS

.test {
  height: 100px;
  width: 200px;
  background-color: red;
}

// Vue

  setup() {
    const x = ref(0);

    const mouseMove = event => {
      console.log("Mouse Moved ", event.x, event.y);
      x.value = event.x;
    };

    const mouseDown = event => {
      console.log("Mouse Down", event.x, event.y);
    };

    const mouseUp = event => {
      console.log("Mouse Up", event.x, event.y);
    };

    return {
      x,
      mouseMove,
      mouseDown,
      mouseUp
    };
  }

Теперь каждый раз, когда я щелкаю, я вижу все 3 события, вызванные один раз, но при щелчке и перетаскивании ничего не происходит, событие не вызывается. 

Mouse Moved  106 729
Mouse Down 106 729
Mouse Up 106 729

Почему? Кажется, я не могу понять почему.

...