Question

我只是想看看@ 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

那是为什么？我似乎不明白为什么。

如何在Composition API中使用Vue鼠标事件？

0 个答案: