Question

我正在使用自定义指令，因此希望创建一个指令，以便您可以根据在标记中传递的内容使用单独的事件来触发它。

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

我已经浏览了Vues文档，并尝试搜索如何执行此操作，但是对此一无所获。这是可以做的事情，以便您可以创建一个指令并在其中具有多个功能或定义所需事件类型的能力吗？还是我必须注册多个指令才能实现这一目标？

Answer 1

您可以通过在自定义vue指令中使用args或modifiers来实现此目的。

要使用这些挂钩，您必须查看指令的binding参数。此参数包括a whole set of properties，可用于烘烤自定义指令。

在您的情况下，您希望根据所需的HTML结构查找binding.modifier或binding.arg：

参数标记：<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>

vue中自定义指令的修改器

1 个答案: