0

我想使用mousedown,mousemove和mouseup事件来实现可拖动的线。

在我的第一次尝试中，我尝试使用箭头函数类属性：https ://codesandbox.io/s/example-1-15psm?fontsize=14&hidenavigation=1&theme=dark

但是positionin的属性Test.vue似乎是非反应性的。不确定，但我猜是因为这个Vue 限制：

不要在选项属性或回调上使用箭头函数，例如created: () => console.log(this.a)or vm.$watch('a', newValue => this.myMethod())。由于箭头函数没有this,this将被视为任何其他变量并通过父作用域进行词法查找直到找到，通常会导致诸如 UncaughtTypeError: Cannot read property of undefined或Uncaught TypeError: this.myMethod is not a function.

在我的第二次尝试中，我尝试使用标准类方法： https ://codesandbox.io/s/example-2-t7beu?fontsize=14&hidenavigation=1&theme=dark

它可以工作，除非因为绑定的函数onMouseMove和onMouseUpinTest.vue是匿名的，我不能用removeEventListener.

那么，在 Vue 类组件中使用addEventListenerand的正确方法是什么？removeEventListener

4

1 回答 1

2

我过度设计了我的代码。无需使用arrow-functions-class-properties，也无需使用 定义上下文method.bind(this)。以下代码应该可以工作：

import { Vue, Component } from "vue-property-decorator";

@Component
export default class Test extends Vue {
  position = 0;

  onMouseMove(e) {
    let position = this.position;
    position += e.movementY;
    this.position = position;
    console.log("onMouseMove", this.position);
  }

  onMouseUp() {
    console.log("onMouseUp", this.position);
    document.removeEventListener("mousemove", this.onMouseMove);
    document.removeEventListener("mouseup", this.onMouseUp);
  }

  onMouseDown() {
    console.log("onMouseDown", this.position);
    document.addEventListener("mousemove", this.onMouseMove);
    document.addEventListener("mouseup", this.onMouseUp);
  }
}

工作示例：https ://codesandbox.io/s/example-2-t7beu?fontsize=14&hidenavigation=1&theme=dark

于 2020-02-07T08:08:35.507 回答