unique-interface/src/utils/clickoutside.js

无UI组件库

/**
 * v-clickoutside
 * @desc 点击元素外面才会触发的事件
 * @example
 * ```vue
 * <div v-ui-clickoutside="handleClose">
 * ```
 */

import { on } from './dom.js';

var clickStart;
var actionList = [];

on(document, 'mousedown', function(e) {
    clickStart = e;
});
on(document, 'mouseup', function(e) {
    actionList.forEach(function(action) {
        action.handler(clickStart, e);
    });
});

function createDocumentHandler(el, binding, vnode) {
    return function(mouseup, mousedown) {
        if (!vnode ||
            !vnode.context ||
            !mouseup ||
            !mousedown ||
            !mouseup.target ||
            !mousedown.target ||
            el.contains(mouseup.target) ||
            el.contains(mousedown.target) ||
            el === mouseup.target) return;

        if (binding.expression && vnode.context[binding.expression]) {
            vnode.context[binding.expression]();
        } else if (binding.value) {
            binding.value();
        }
    };
}

export default {
    bind: function(el, binding, vnode) {
        actionList.push({
            el: el,
            handler: createDocumentHandler(el, binding, vnode),
        });
    },

    update: function(el, binding, vnode) {
        var currentAction;
        actionList.some(function(action) {
            if (action.el === el) {
                currentAction = action;
                return true;
            }
        });
        currentAction.handler = createDocumentHandler(el, binding, vnode);
    },

    unbind: function(el) {
        var len = actionList.length;
        for (var i = 0; i < len; i++) {
            if (actionList[i].el === el) {
                actionList.splice(i, 1);
                break;
            }
        }
    }
};