Привязать несколько событий к директиве v-on в Vue

Question

В jQuery вы можете связать несколько событий, выполнив что-то вроде этого:

$('#myDiv').on('touchstart mousedown', // more code here

И, насколько я понимаю, он будет одновременно прослушивать touchstart ИЛИ mousedown.Но я не могу понять, как сделать эквивалент с Vue.Я могу сделать только @touchstart="doSomething()" или @mousedown="doSomething()".Я что-то упускаю из виду?Спасибо

Answer 1

Нет, вы не упускаете ничего очевидного."touchstart mousedown" - это сокращенное обозначение, предоставленное jQuery для удобства.Vue не обеспечивает аналогичного удобства (возможно, потому что синтаксис привязки событий для attrs уже может стать довольно проблематичным со всеми предоставленными опциями).

Правильный метод будет таким, как вы указали, используя два отдельных атрибута: @touchstart="doSomething()" or @mousedown="doSomething()"

Answer 2

1.С модификаторами событий

Если вы полагаетесь на event s, вы можете попробовать связать с модификаторами событий и отсортировать их в цепочке.Что-то вроде:

<a @click.stop="doThis" @click.right="showContextMenu"></a>

2.Прикрепление событий программно

Или, вы можете создать свой список событий и их соответствующих реализаций для присоединения и выполнить цикл с v-on, обходной путь от этого поста :

created() {
    const EVENTS = [
      {name: 'my-event1', callback: () => console.log('event1')},
      {name: 'my-event2', callback: () => console.log('event2')},
      {name: 'my-event3', callback: () => console.log('event3')}
    ]

    for (let e of EVENTS) {
      this.$on(e.name, e.callback); // Add event listeners
    }
  }

<button @click="$emit('my-event1')">Raise event1</button>
<button @click="$emit('my-event2')">Raise event2</button>
<button @click="$emit('my-event3')">Raise event3</button>

3.v-on несколько значений

В противном случае, точно так же, как вы можете сделать v-bind для нескольких значений , вы можете сделать то же самое с v-on для событий.

<div id="mydDiv" v-on="handlers"></div>

// ...

data() {
  const vm = this;

  return {
    handlers: {
      mousedown: vm.divMousedown,
      touchstart: vm.divTouchstart
    }
  }
},

methods: {
  divMousedown() {
    console.log('event: mousedown');
  },
  divTouchstart() {
    console.log('event: touched');
  }
}

---

Если вам нужно разбить обработчики по типу события, попробуйте проверить type во время запуска события , так что в вашем случае, так как touchstart, похоже, такжетриггер mousedown, возможно:

methods: {
  onTouched(evt) {
    evt.preventDefault();

    if (evt.type === 'mousedown') {
        // handle mousedown
    }
    else if (evt.type === 'touchstart') {
        // ...
    }
  }
}

Примечание : Возможно, вы захотите позвонить preventDefault() на touchmove, а не touchstart.Таким образом, события мыши все еще могут срабатывать, и такие вещи, как ссылки, будут продолжать работать.

Answer 3

Связывание с несколькими событиями специально не поддерживается vue из-за внутренних ограничений в именах атрибутов и стремления избежать накладных расходов во время выполнения.

Если вам абсолютно необходимо иметь привязки к нескольким событиям, пользовательская директива будет подходить .

(Следующий код беззастенчиво копируется из связанного JSFiddle, так как SO не разрешает ссылаться на скрипты без кода в ответе)

function functionWrapper(e) {
  /* add filters to handle event type before propagating to callback function for custom event handler */
  e.target.__handler__.fn(e)
}

Vue.directive('multiEvent', {
  bind: function(el, binding, vnode) {
    el.__handler__ = binding.value
    binding.value.evt.forEach(e => el.addEventListener(e, functionWrapper))
  },
  unbind: function(el, binding) {
    el.__handler__.evt.forEach(e => el.removeEventListener(e, functionWrapper))
    el.__handler__ = null
  }
})

Использование:

<input v-multi-event="{ evt: ['click', 'blur', 'change', 'keydown'], fn: someCallback }">