vue3 自定义指令如何执行js表达式呢？

Z时代
2024-03-04
分类：IT

这是我现在的写法
给指令传递一个函数然后执行函数
.vue
vue3 自定义指令如何执行js表达式呢？

v-click-blank="() => { isShowSearchBox = false }"

directives.js

export default {
    clickBlank: {
        mounted(el, binding) {
               binding.value && binding.value()
        }
    }};

期望结果
想写成vue本身的click一样
directives.js 该如何写呢

// 修改变量
v-click-blank="isShowSearchBox = false"
// 调动函数v-click-blank="handleClick"

回答：

你可以参考一下，下面的实现

export default {
  clickBlank: {
    mounted(el, binding, vnode) {
      // 确保 vnode.component 上下文可用
      if (!vnode.component) return;
      // 创建一个动态函数，接受传递的表达式作为函数体
      const dynamicFunction = new Function(`with(this){ ${binding.value} }`);
      // 创建一个处理函数，当事件触发时执行动态函数
      const eventHandler = (event) => {
        if (el.contains(event.target)) return;
        dynamicFunction.call(vnode.component.proxy);
      };
      // 监听 document 上的 click 事件
      document.addEventListener("click", eventHandler);
      // 在指令解绑时移除事件监听
      el._click_blank_handler = eventHandler;
    },
    unmounted(el) {
      if (el._click_blank_handler) {
        document.removeEventListener("click", el._click_blank_handler);
      }
    },
  },
};