前端知识分享

1. vue $bus的使用

首先我们要在main.js挂载Vue.prototype.$bus=new Vue()

可以通过this.$bus.$emit(‘a’,item)发送事件函数
可以通过在created和mouted 通过this.$bus.$on(“a”,(item)=>{})接受事件函数

a事件名称 item传的参数。

1. clickOutside的使用

首先创建clickOutside.js文件，定义事件方法代码如下

let instances = [];

function handleClickStop(e) {
    e.stopPropagation();
}
export const stopP = {
    bind(el) {
        el.__vueClickStop__ = handleClickStop;
        el.addEventListener('click', el.__vueClickStop__, false);
    },
    unbind(el) {
        el.removeEventListener('click', el.__vueClickStop__, false);
        delete el.__vueClickStop__;
    }
}

function handler(event) {
    const { target } = event;
    instances.forEach(item => {
        const { el } = item;
        if (el !== target && !el.contains(target)) {
            const { binding } = item;
            binding.value();
        }
    });
}

export const clickOutside = Object.defineProperties({}, {
    bind: {
        value: function bind(el, binding) {
            if (typeof binding.value !== 'function') {
                throw new TypeError('click-outside指令的值必须是一个method')
            }
            if (instances.push({ el, binding }) === 1) {
                document.addEventListener('click', handler, true);
            }
        }
    },
    unbind: {
        value: function unbind(el) {
            instances = instances.filter(item => {
                return item.el !== el;
            });
            if (!instances.length) {
                document.removeEventListener('click', handler, true);
            }
        }
    }
});

然后在man.js引用