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

需求

el-popover弹窗内嵌套下拉选择框,点击el-popover弹出外部区域需关闭弹窗,点击查询、重置需关闭弹窗,

实现

根据需求要自定义弹窗的关闭和显示,首先想到的是visible属性,在实现过程中经过反复的测验,使用visible属性点击弹窗外部区域无法关闭弹窗。

转换思路使用el-popover的hide事件来实现自定义关闭,可满足上述需求

html 复制代码
<el-popover
   ref="popoverRef"
   :offset="20"
   placement="bottom"
   trigger="click"
 >
</el-popover>
javascript 复制代码
const popoverRef= ref();
//关闭弹窗
const closePopover = function () {
  popoverRef.value.hide();
};

问题描述 :在 el-popover 弹出框组件中嵌入 el-select 选择器组件后,点击 el-select 选择器选中选项后,不仅 el-select 选择器的选项弹框关闭了,外层 el-popover 组件的弹框也一并关闭了。
原因:el-popover 弹出框组件的关闭逻辑是当点击 popover 弹框以外的元素时,弹框就会关闭。然而 el-select 的 options 弹框默认是针对页面元素进行渲染的,而不是针对父元素渲染。也就是说, el-select 的 options 弹框不在 el-popover 弹出框上,点击options 弹框后会触发 popover 弹窗框的关闭条件,因此就会造成选择 el-select 选择器的选项后,外层的 el-popover 弹出框也会关闭。

解决方式 :Select 选择器有一个属性 teleported,该属性可以控制 options 弹框的渲染位置。

html 复制代码
<el-popover
   ref="popoverRef"
   :offset="20"
   placement="bottom"
   trigger="click"
 >
 <el-select v-model="value" placeholder="Select" :teleported="false" style="width: 240px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
</el-popover>
javascript 复制代码
const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
]
相关推荐
秋田君34 分钟前
uniapp中使用Mescroll实现下拉刷新与上拉加载项目实战
javascript·uni-app
川石教育1 小时前
Vue前端开发-slot传参
前端·vue.js·前端框架·前端开发·slot组件
确实菜,真的爱1 小时前
vue3 element plus 把表格数据导出到excel
javascript·vue.js·excel
一舍予2 小时前
nuxt3项目搭建相关
开发语言·javascript·vue.js·nuxt
新时代的弩力2 小时前
【Cesium】--viewer,entity,dataSource
前端·javascript·vue.js
无恃而安2 小时前
localStorage缓存 接口 配置
javascript·vue.js·缓存
_大菜鸟_2 小时前
修改element-ui-时间框date 将文字月份改为数字
javascript·vue.js·ui
尽兴-2 小时前
Vue 中父子组件间的参数传递与方法调用
前端·javascript·vue.js·父子组件·参数传递·组件调用
JerryXZR2 小时前
Vue开发中常见优化手段总结
前端·javascript·vue.js·vue性能优化
堕落年代2 小时前
Vue3的双向数据绑定
前端·javascript·vue.js