Vue class 组件AddEventListener 和RemoveEventListener 用法

Question

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

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

但是 Test.vue 中的属性 position 似乎没有反应。不确定，但我猜是因为 this Vue 限制：

Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()). Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

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

它有效，除了因为 Test.vue 中的绑定函数 onMouseMove 和 onMouseUp 是匿名的我不能用 removeEventListener.

解除绑定

那么，在 Vue class 组件中使用 addEventListener 和 removeEventListener 的正确方法是什么？

Answer 1

我过度设计了我的代码。无需使用 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

Vue class 组件AddEventListener 和RemoveEventListener 用法

Vue class component AddEventListener and RemoveEventListener usage

vue.js

vuejs2

addeventlistener

vue-class-components

removeeventlistener