自定义指令阻止Element Ui的Clickoutside执行

场景

弹出内容的弹窗与触发弹窗的元素不在同一个盒子上，当点击触发元素时不执行Clickoutside的方法

规定

必须与element的Clickoutside结合使用

用法

<el-popover
    placement="bottom"
    trigger="manual"
    v-model="showPopover">
    <div v-clickoutside="handleClosePopover">
        展示内容
    </div>
    <el-button v-stop-clickoutside  slot="reference" size="small" @click="handleAddClick">快捷按钮</el-button>
</el-popover>

自定义指令源码（插件方式，可自动化）

export default {
    bind(el, binding, vnode){
        el._stop_clickoutside = function(e){
            // 重点：
            // element的Clickoutside 底层是 使用（addEventListener或attachEvent）
            // 给document增加mouseup监听事件，mouseup事件触发则执行传入的方法

            // 阻止捕获和冒泡阶段中当前事件的进一步传播，即拦截当前元素mouseup，不传给document元素
            e.stopPropagation()
        }
        // 不考虑attachEvent情况，抛弃IE
        el.addEventListener('mouseup', el._stop_clickoutside)
    },
    unbind(el) {
        el.removeEventListener('mouseup', el._stop_clickoutside)
    },
    install: function(Vue) {
        Vue.directive('stopClickoutside', this);
    }
};