el-popover嵌套select弹窗点击实现自定义关闭

在Vue中使用Element UI的el-popover组件嵌套el-select时，可以通过el-popover的ref属性和visible属性来控制弹窗的显示和隐藏。以下是实现自定义关闭逻辑的示例代码：

<template>
  <el-popover
    ref="popover"
    placement="bottom"
    width="200"
    v-model="popoverVisible"
    trigger="manual"
  >
    <el-select v-model="selectValue" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-button slot="reference" @click="togglePopover">打开选择器</el-button>
  </el-popover>
</template>
 
<script>
export default {
  data() {
    return {
      popoverVisible: false,
      selectValue: '',
      options: [{ value: '1', label: '选项1' }, { value: '2', label: '选项2' }],
    };
  },
  methods: {
    togglePopover() {
      if (!this.popoverVisible) {
        this.$nextTick(() => {
          this.$refs.popover.doShow();
        });
      } else {
        // 自定义关闭逻辑，例如：点击空白处关闭
        document.addEventListener('click', this.closePopover, { once: true });
      }
      this.popoverVisible = !this.popoverVisible;
    },
    closePopover() {
      this.popoverVisible = false;
    },
  },
};
</script>

在这个例子中，我们定义了一个名为popoverVisible的数据属性来控制el-popover的显示和隐藏。通过点击按钮切换popoverVisible的值，从而显示或隐藏el-popover。

当需要隐藏弹窗时，我们使用了el-popover的doClose方法，并且为了实现点击空白处关闭的效果，我们在togglePopover方法中监听了一次document的点击事件，并在点击空白处时调用closePopover方法来关闭弹窗。这样就实现了自定义的关闭逻辑。