Vue2自定义指令监听是否点击元素外部

最新推荐文章于 2025-05-29 10:39:47 发布

原创最新推荐文章于 2025-05-29 10:39:47 发布 · 826 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文详细介绍了 Vue.js 中自定义指令的使用方法，包括聚焦输入框的 focus 指令和点击外部区域取消选中状态的 clickOutside 指令。通过具体的实现代码展示了如何在 Vue 应用中增强 DOM 的交互性和功能性。

export default {
  directives: {
    focus: {
      inserted: function (el)
      {
        el.querySelector('input').focus()
      },
      clickOutside: {
        bind (el, binding, vnode)
        {
          function documentHandler (e)
          {
            if (el.contains(e.target)) {
              return false;
            }
            // binding.value(e); // 操作
          }
          el.__vueClickOutside__ = documentHandler;
          document.addEventListener('click', documentHandler);
        }
      }
    },
    unbind (el, binding)
    {
      document.removeEventListener('click', el.__vueClickOutside__);
      delete el.__vueClickOutside__;
    }
  },
}

标签