Модификатор для пользовательской директивы в vue

Question

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

v-example-directive.mousedown="exampleFunction"
v-example-directive.mouseup="exampleFunction"
v-example-directive.click="exampleFunction"

Я просматривал VuesДокументация и пробовал искать, как это сделать, но ничего не нашел по этому поводу.Это можно сделать так, что вы можете создать одну директиву и иметь несколько функций внутри или возможность определить, какой тип события вы хотите?Или я должен был бы зарегистрировать несколько директив для достижения этого?

Answer 1

Вы можете достичь этого, используя args или modifiers в своей пользовательской директиве vue.

Чтобы использовать эти ловушки, вам нужно посмотреть на параметр binding директивы.Этот параметр включает в себя целый набор свойств , которые вы можете использовать, чтобы испечь свою пользовательскую директиву.

В вашем случае вы захотите поискать либо binding.modifier, либо binding.arg в зависимостив желаемой HTML-структуре:

Разметка аргумента: <img v-example-directive:mouseup>

Разметка модификатора: <img v-example-directive.mouseup>

Теперь, когда вы добавили "flag ", вы можете проверить это в директиве:

Vue.directive('example-directive', {
  bind(el, binding) {
    if (binding.arg == 'mouseup') {} // Using argument markup
    if (binding.modifiers.mouseup) {} // Using modifier markup
  }
})

Пример:

Vue.directive('example-directive', {
    bind(el, binding) {
        if (binding.arg == 'mousedown') { // Check by argument given to directive
          el.addEventListener("mousedown", () => {
            binding.value() // The function provided by the directive
          });
        }else if (binding.modifiers.mouseup) { //check by modifier 
          el.addEventListener("mouseup", () => {
            binding.value()
          });
        }
    }
})

let x = new Vue({
  el:"#app",
  methods: {
    clicked() {
      console.log("clicked")
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<button v-example-directive:mousedown="clicked">mousedown</button>
<button v-example-directive.mouseup="clicked">mouseup</button>
<!-- ... -->
</div>