vue의 사용자 지정 지시문에 대한 수정자

vue의 사용자 지정 지시문에 대한 수정자

커스텀 디렉티브를 사용하고 있는데 마크업에서 전달한 내용에 따라 별도의 이벤트를 사용하여 작업을 수행할 수 있도록 만들고 싶습니다.

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

Vues Documentation에서 이 작업을 수행하는 방법을 찾아봤지만 아무것도 찾지 못했습니다.하나의 디렉티브를 생성하여 내부에 여러 기능을 포함하거나 원하는 유형의 이벤트를 정의할 수 있도록 할 수 있습니까?아니면 여러 디렉티브를 등록해야 합니까?

다음을 사용하여 이를 달성할 수 있습니다.args또는modifiers커스텀 vue 디렉티브에서 참조해 주세요.

이 훅을 사용하려면 이 훅의binding명령어 파라미터입니다.이 매개 변수에는 사용자 지정 지시문을 굽는 데 사용할 수 있는 전체 속성 세트가 포함됩니다.

고객님의 경우 다음 중 하나를 찾으시기 바랍니다.binding.modifier또는binding.arg원하는 HTML 구조에 따라 달라집니다.

인수 마크업:<img v-example-directive:mouseup>

수정자 마크업:<img v-example-directive.mouseup>

이제 "플래그"를 추가했으므로 지시문에서 해당 플래그를 확인할 수 있습니다.

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>

언급URL : https://stackoverflow.com/questions/52955664/modifier-to-custom-directive-in-vue