el-popover 弹出框自定义关闭/打开。

有时我们会遇到在弹出框内放入一些组件进行操作，选中后根据确认还是取消，进行一些功能实现。比如我最近遇到，动态配置el-table表头展示字段，根据选中的checkBox，进行渲染el-table表头。

 先选中再点击确认来渲染表头，所以就需要使用到el-popover 的自定义关闭/打开方式。

这个我们就需要使用到el-popover的两个属性：trigger触发方式，设置为自定义触发manual； v-model状态是否可见，默认设为false不可见。

                <el-popover placement="bottom" width="400" trigger="manual"  v-model="visiblepop">
                    <!--el-popover中的其他代码组件，这里以el-checkbox为例子-->
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleAllChange">全选</el-checkbox>
                    <div style="border-bottom:1px solid #DFE0E3; position: absolute;left: 0;width: 100%;margin-top:5px;"></div>
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedChange">
                        <el-checkbox v-for="headInfo in tableHead" :label="headInfo" :key="headInfo">{{headInfo.label}}</el-checkbox>
                    </el-checkbox-group>
                    <!--触发el-popover的按钮-->
                    <el-button slot="reference"  @click="openDown"><i class="el-icon-s-tools"></i></el-button>
                    <div class="checkboxBtn">
                        <el-button @click="sureCheckBox" type="primary">确认</el-button>
                        <el-button @click="qxCheckBox">取消</el-button>
                    </div>
                </el-popover>

 当触发openDown时，将v-model的状态修改

            openDown(){
                this.visiblepop=!this.visiblepop
                //其他操作逻辑
            },

在el-popover操作完成后，点击确认和取消需要关闭弹出框，将v-model的状态修改为false。

            sureCheckBox() {
                //点击确认后需要处理的其他逻辑
                this.visiblepop=false;
            },

            qxCheckBox(){
                //可能需要的逻辑
                this.visiblepop=false;
            },

当el-popover设置为自定义打开关闭方式后，点击空白处处，是不能关闭它的