脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → el-popover嵌套select弹窗

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

 更新时间：2024年07月23日 11:16:29   作者：徐_三岁  
el-popover弹窗内嵌套下拉选择框,点击el-popover弹出外部区域需关闭弹窗,点击查询、重置需关闭弹窗,遇到这样的需求怎么解决呢,下面小编给大家介绍el-popover嵌套select弹窗点击实现自定义关闭功能,感兴趣的朋友一起看看吧

需求

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

实现

根据需求要自定义弹窗的关闭和显示，首先想到的是visible属性，在实现过程中经过反复的测验，使用visible属性点击弹窗外部区域无法关闭弹窗。
转换思路使用el-popover的hide事件来实现自定义关闭，可满足上述需求

<el-popover
   ref="popoverRef"
   :offset="20"
   placement="bottom"
   trigger="click"
 >
</el-popover>
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 弹框的渲染位置。

<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>
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
]

到此这篇关于el-popover嵌套select弹窗点击实现自定义关闭的文章就介绍到这了,更多相关el-popover嵌套select弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS判断是否为JSON对象及是否存在某字段的方法(推荐)

    JS判断是否为JSON对象及是否存在某字段的方法(推荐)

    下面小编就为大家带来一篇JS判断是否为JSON对象及是否存在某字段的方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • ES6新数据结构Map功能与用法示例

    ES6新数据结构Map功能与用法示例

    这篇文章主要介绍了ES6新数据结构Map功能与用法,结合实例形式分析了Map的功能、使用方法及相关注意事项,需要的朋友可以参考下
    2017-03-03
  • js图片延迟技术一般的思路与示例

    js图片延迟技术一般的思路与示例

    现将img元素对应的src路径设置为背景图片，而该img所对应的url路径存放在一个自设的属性中
    2014-03-03
  • JS一维数组转化为三维数组方法

    JS一维数组转化为三维数组方法

    这篇文章主要给大家分享了JS一维数组转化为三维数组的方法，下面文章围绕JS数组转换的相关资料展开内容，对大家的学习有一定的参考价值，需要的小伙伴可以参考一下
    2022-01-01
  • webpack中CommonsChunkPlugin详细教程(小结)

    webpack中CommonsChunkPlugin详细教程(小结)

    本篇文章主要介绍了webpack中CommonsChunkPlugin详细教程(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • JS实现带有抽屉效果的产品类网站多级导航菜单代码

    JS实现带有抽屉效果的产品类网站多级导航菜单代码

    这篇文章主要介绍了JS实现带有抽屉效果的产品类网站多级导航菜单代码,涉及JavaScript动态操作页面元素属性的技巧,整体界面效果美观大方,具有极强的立体感,需要的朋友可以参考下
    2015-09-09
  • js的各种数据类型判断的介绍

    js的各种数据类型判断的介绍

    今天小编就为大家分享一篇关于js的各种数据类型判断的介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 微信小程序封装的HTTP请求示例【附升级版】

    微信小程序封装的HTTP请求示例【附升级版】

    这篇文章主要介绍了微信小程序封装的HTTP请求,结合实例形式分析了微信小程序封装基于wx.request方法的http请求相关操作与使用技巧,并附带升级版示例供大家参考,需要的朋友可以参考下
    2019-05-05
  • JavaScript从0开始构思表情插件

    JavaScript从0开始构思表情插件

    在项目开发阶段很多项目都会用到表情插件，接下来通过本文给大家介绍了JavaScript从0开始构思表情插件 的相关资料,需要的朋友可以参考下
    2016-07-07
  • 如何利用js实时监听input输入框值的变化

    如何利用js实时监听input输入框值的变化

    在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感,这篇文章主要给大家介绍了关于如何利用js实时监听input输入框值的变化,需要的朋友可以参考下
    2024-02-02

最新评论