自定义指令 - 点击空白处隐藏弹层

 const clickoutside = {
        // 初始化指令
        bind(el, binding, vnode) {
            function documentHandler(e) {
                // 这里判断点击的元素是否是本身，是本身，则返回
                if (el.contains(e.target)) {
                    return false;
                }
                // 判断指令中是否绑定了函数
                if (binding.expression) {
                    // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                    binding.value(e);
                }
            }
            // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
            el.__vueClickOutside__ = documentHandler;
            document.addEventListener('click', documentHandler);
        }
    };

 export default {
        name: "MenuLists",
        directives: {
            clickoutside
        },
        methods: {
            handleClose() {
                this.isShowLists = false;
            }
        }
    }

<template>
    <div class="box" v-clickoutside="handleClose">
        <div class="btn" @click="isShowLists = !isShowLists">按钮按钮</div>
        <ul v-show="isShowLists" v-color-swatch="color">
            <li v-for="(item,index) in dataLists" :key="index">
                {{item}}
            </li>
        </ul>
    </div>
</template>