功能讲解
网上看到很多帖子都是答非所问，或者给的解决办法只有一半，根本不是我要得功能。
我要的功能是：有一个按钮，有一个页面，我点击按钮的时候页面可以显示，再点击可以隐藏，一直循环。同时页面显示的时候点击页面区域是不会关闭的，但是点击页面区域之外的地方就会把页面关闭。类似于elementul弹框的那种点击空白处或者点击遮罩层直接关闭弹框的效果
上代码
html部分：这里注意一个是按钮，一个是显示页面，我们之所以可以点击之外的区域可以隐藏，是在外面包了一个div，div上写的v-cloak v-clickoutside="outsideClose"这个是重点
<!-- 点击按钮可以显示隐藏，点击显示的区域不关闭，如果点击的是显示区域之外的地方关闭显示区域 --><div v-cloak v-clickoutside="outsideClose"><div @click="show = !show">按钮</div><div v-show="show">显示</div></div>
js部分：这里注意clickoutside这个方法就是通过上面divv-clickoutside="outsideClose"绑定的，所以不要纠结为什么没有获取元素之类的。我看网上帖子好多都是就发了一个方法，然后也没解释，下面评论都在问这个方法不用绑定元素吗之类的。这不是坑新人吗。
<script>export default {data() {return {//这个是显示隐藏的变量show: true};},//这个是主要用来判断是不是区域外的方法directives: {clickoutside: {//初始化，这边判断是否是区域之外bind(el, binding, vnode) {function documentHandler(e) {if (el.contains(e.target)) {return false;}if (binding.expression) {binding.value(e);}}function KeyUp(e) {if (e.keyCode == 27) {if (binding.expression) {binding.value(e);}}}el.__vueClickOutSize__ = documentHandler;el.__vueKeyup__ = KeyUp;document.addEventListener("keyup", KeyUp);document.addEventListener("click", documentHandler);},//销毁事件监听unbind(el, binding) {document.removeEventListener("click", el.__vueClickOutSize__);delete el.__vueClickOutSize__;document.removeEventListener("keyup", el.__vueKeyup__);delete el.__vueKeyup__;},},},methods: {//如果是区域外调用方法隐藏页面outsideClose() {this.show = false;},},};</script>
