clickoutside指令,点击容器外触发事件

 <div v-clickoutside="clickEventspace">点击我不会触发事件,点击我的外部触发事件</div>
 export default {
    //实现点击div元素外出发事件
    directives: {
      clickoutside: {
        bind: function(el, binding, vnode) {
          function documentHandler(e) {
            if (el.contains(e.target)) {
              return false;
            }
            if (binding.expression) {
              binding.value(e);
            }
          }
          el.__vueClickOutside__ = documentHandler;
          document.addEventListener("click", documentHandler);
        },
        unbind: function(el, binding) {
          document.removeEventListener("click", el.__vueClickOutside__);
          delete el.__vueClickOutside__;
        },
      },
    },
    methods : {
      clickEventspace() {
        console.log("点击了div元素外");
      },
    },
  }
发表评论 / Comment

用心评论~