javascript - 从 vue 指令操作目标的 dom

Question

我想定义一个 vue 指令，在点击时切换弹出窗口的显示，我现在拥有的是:

切换.js

export default {
    bind(el, binding) {
        console.log(binding.value); // this is undefined

        el.onclick = function() {
            console.log(binding.value); // this is undefined as well

            // toggle menu element display
        };
    }
};

组件.vue

<template>
    <button v-toggle="$refs.menu">
        ...
    </button>
    <div ref="menu">
        ...
    </div>
</template>

<script>
    import Toggle from 'path/to/toggle.js';

    export default {
        name: "Component",
        directives: {
            Toggle
        }
</script>

内部绑定(bind)函数 binding.value 始终未定义，可能是因为菜单引用尚未准备好。这样做的正确方法是什么？

Answer 1

$refs 不会在设置指令时填充。您可以使它的表达式成为一个函数，它将在点击发生时评估 $refs.menu，而不是在指令设置时。

new Vue({
  el: '#app',
  directives: {
    toggle: {
      bind(el, binding) {
        el.onclick = function() {
          const target = binding.value();

          target.classList.toggle('closed');
        };
      }
    }
  }
});

.closed {
  display: none;
}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <button v-toggle="() => $refs.menu">
    Button
  </button>
  <div ref="menu">
    Some junk in the menu
  </div>
</div>