vue组件在点击页面的其他地方的时候隐藏起来

在实际工作中会出现这样的情况：

自己编写或者二次封装的组件需要完成一个：点击页面的其他非组件的地方的时候要把这个组件隐藏起来

解决方法：（解决思路来自于： https://segmentfault.com/q/1010000016390589  ，对文中的代码进行了部分修改，如果想看原版代码，请点击链接）

为了更好的复用该组件，要把这个事件的监控写在组件的里面。方便接下来调用的时候的正常运作

本人的组件是对element 的分页组件进行了二次封装，如图：

 

 

 

根据上述链接中的代码提示是，在点击了整个的组件之外的地方，把该组件隐藏，但是实际上，对于本人来说，本人需要的一个操作过程是
：点击该页面数据数选择按钮，，数据数目列出现，，点击页面中除页面数据选择按钮之外的地方都会隐藏数据数目。

因此 我对代码进行了修改
给页面数据选择按钮的外面的div，即页面数据选择按钮的父元素设置了一个ref='rowList',以及给数据数目列是否隐藏的变量showRowList；
当点击发生在这个页面数据选择按钮的父元素之内（数据列是和数据按钮同级排版的），则不做任何操作，反之则隐藏数据列。 

 

beforeMount() {
    this._close = e => {
        // 如果点击发生在当前组件内部，则不处理
        if (this.$refs.rowList.contains(e.target)) {
            return;
        }
        this.showRowList = false;
    };
    document.body.addEventListener('click', this._close);
},
beforeDestroy() {
    document.body.removeEventListener('click', this._close);
},