vue.js - 如何将 Vue 鼠标事件与组合 api 一起使用？

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

这是为什么 ？我似乎无法理解为什么。

标签： vue.jsvue-composition-apivuejs3