vue 点击 除某元素以外的区域关闭弹窗

这边是仿TAPD里的一个分页器

点击向下的箭头上面有几页的那部分显示，点击其他地方那部分隐藏，本来是没有头绪的，后来看到一个暴躁老哥的博客上有https://blog.csdn.net/xingyu_qie/article/details/78831045，就借鉴了一下（看不懂我的可以看他的，他的写的还比较详细）

<div class="row app" id="panDian" v-cloak @click="hidePanel">
                                <div class="custom-paging">
                                    <div class="main-paging" style='margin-right: 60px;'>
                                        <div class="pos-box" v-show="showHandleTagPaging">
                                            <ul id="handle">
                                                <li v-for="i in totalHandle" @click="getToChecked(i)">@{{ i }}/@{{ totalHandle }}</li>
                                            </ul>
                                        </div>
                                        <span>@{{ skipHandle }}/@{{ totalHandle }}</span><i class="iconfont icon-iconfontxiangxia" @click.stop="showHandleTagPaging = true;computeHeight('handle')"></i><i :class="skipHandle != 1 ? 'iconfont icon-07jiantouxiangzuofill' : 'iconfont icon-07jiantouxiangzuofill ban'" @click="skipHandle != 1 && (skipHandle--,getToChecked())"></i><i :class="skipHandle != totalHandle ? 'iconfont icon-xiangyou3fill' : 'iconfont icon-xiangyou3fill ban'" @click="skipHandle != totalHandle && (skipHandle++,getToChecked())"></i>
                                    </div>
                                </div>
</div>

                computeHeight(e){ //设置分页弹出Box的高度
                        this.$nextTick(function(){
                            let h = $("#handle").height()
                            $("#handle").parent(".pos-box").css("top",'-'+h+'px') 
                        })
                },
                hidePanel (event){ //点击元素外的区域隐藏分页Box
                let sp2 = document.getElementById("handle");
                    if(sp2){
                        if(!sp.contains(event.target)){
                        this.showHandleTagPaging= false;
                        }
                    }
                },

这边主要是hidePanel这个函数 在你的点击元素的父元素上加上这个函数，判断你点击的部分是不是这个点击元素
data里有一个变量控制显隐

showHandleTagPaging:false

computeHeight 这个函数是计算弹出部分的高，从而设置他position 的 top ,
这里因为是涉及到重新渲染视图，所以需要等渲染完成之后更改再获取高度(不然获取到的是更新视图之前的高度，更新之前那部分是隐藏的，高度永远为0)，需要用到

                        this.$nextTick(function(){
                        })

这边着重记一下这次学到的小东西：
如果是要有条件的触发某点击事件，可以这样：

@click="skipHandle != 1 && (skipHandle--,getToChecked())"

&&符号前面是条件，后面是你要触发的函数 这里我要触发两个函数，所以用逗号隔开（ps:分号是没用的哦）