el-popover中的选项点击会触发modal弹窗.html

<!--
场景：
el-popover中的选项点击会触发modal弹窗，
需求是，用户在弹窗点击操作，而不会使el-popover关闭，让它一直处于打开状态，直到当弹窗关闭后，
用户的接下来的操作，就正常触发el-popover关闭
-->

<!--
方案1：
el-popover的触发方式是manual
-->

<el-popover
  :visible="showMorePopover"
  ...
>
<template #reference>
  <el-button @click.stop="showMorePopover = !showMorePopover">

<script>
const showMorePopover = ref<boolean>(false)

const closeMorePopover = () => {
  showMorePopover.value = false
}

onMounted(() => {
  const $app = document.getElementById('app')!
  $app.addEventListener('click', closeMorePopover)
})

onBeforeUnmount(() => {
  const $app = document.getElementById('app')!
  $app.removeEventListener('click', closeMorePopover)
})
</script>

<!--
这样做利用了 #app 元素和 modal元素是平级的
-->


<!--
方案2：
这最简单的方式，利用的是el-popover的hide-after配置，而trigger方式是click
-->

<el-popover
  :hide-after="hideAfter"
  ...
>

<script>
// modalVisible是modal绑定的是否打开modal的变量
const hideAfter = computed(() => {
  return modalVisible.value ? 24 * 60 * 60 * 1000 : 0
})
</script>