Использование компонента класса Vue AddEventListener и RemoveEventListener

Я хочу реализовать перетаскиваемую строку с использованием событий mousedown, mousemove и mouseup.

В своей первой попытке я пытался использовать свойства классов-функций-стрелок: https://codesandbox.io/s/example-1-15psm?fontsize=14&hidenavigation=1&theme=dark

Но свойство position в Test.vue кажется неактивным. Не уверен, но я предполагаю, что это из-за этого Vue ограничение:

Не используйте стрелочные функции в свойстве опций или обратном вызове, например created: () => console.log(this.a) или vm.$watch('a', newValue => this.myMethod()). Поскольку стрелочная функция не имеет this, this будет обрабатываться как любая другая переменная и лексически просматриваться в родительских областях до тех пор, пока не будет найдена, что часто приводит к таким ошибкам, как Uncaught TypeError: 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 и onMouseUp в Test.vue анонимны, я не могу их отвязать с помощью removeEventListener.

Итак, как правильно использовать addEventListener и removeEventListener в компонентах класса Vue?


vue.js addeventlistener vuejs2 vue-class-components removeeventlistener
person Dmitry    schedule 07.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я перестроил свой код. Нет необходимости использовать 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

person Dmitry    schedule 07.02.2020