脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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实现索引图片切换效果

    js实现索引图片切换效果

    这篇文章主要介绍了js实现索引图片切换效果的代码，特别炫酷的效果，推荐给大家，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • ES6(ECMAScript 6)新特性之模板字符串用法分析

    ES6(ECMAScript 6)新特性之模板字符串用法分析

    这篇文章主要介绍了ES6(ECMAScript 6)新特性之模板字符串用法,简单介绍了ES6模板字符串的概念、功能并结合实例形式分析了ES6模板字符串的用法,需要的朋友可以参考下
    2017-04-04
  • 分享一个自己写的table表格排序js插件(高效简洁)

    分享一个自己写的table表格排序js插件(高效简洁)

    在前不久做的一个web项目中，需要实现js表格排序的效果，当时为了省事，就在网上找了几个相关的js插件
    2011-10-10
  • 深入理解jQuery()方法的构建原理

    深入理解jQuery()方法的构建原理

    对于JQuery，想必大家都很熟悉。目前，很多web项目，在实施的过程中，考虑到各浏览器原生JS API的兼容性，大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发。这篇文章将给大家深入介绍jQuery()方法的构建原理，有需要的朋友们可以参考借鉴。
    2016-12-12
  • JS实现加载时锁定HTML页面元素的方法

    JS实现加载时锁定HTML页面元素的方法

    这篇文章主要介绍了JS实现加载时锁定HTML页面元素的方法,涉及javascript针对页面元素的遍历与属性操作相关实现技巧,需要的朋友可以参考下
    2017-06-06
  • 带左右箭头图片轮播的JS代码

    带左右箭头图片轮播的JS代码

    这篇文章主要介绍了带左右箭头图片轮播的JS代码，有需要的朋友可以参考一下
    2013-12-12
  • JavaScript map()方法功能全解析

    JavaScript map()方法功能全解析

    文章介绍了JavaScript中map()方法的基本语法、核心特点及与forEach()的区别,强调map返回新数组用于数据转换,而forEach无返回值适合副作用操作,同时说明可通过循环实现类似功能,感兴趣的朋友跟随小编一起看看吧
    2025-09-09
  • javascript cookies操作集合

    javascript cookies操作集合

    因为最近要控制广告，所以从绿盟与脚本之家页面上，整理了一些cookies的操作控制代码，喜欢的朋友不容错过。
    2010-04-04
  • 详解CocosCreator优化之DrawCall

    详解CocosCreator优化之DrawCall

    这篇文章主要介绍了CocosCreator中DrawCall的优化，想研究游戏性能的同学，一定要看一看
    2021-04-04
  • 使用postMesssage()实现iframe跨域页面间的信息传递

    使用postMesssage()实现iframe跨域页面间的信息传递

    这篇文章主要介绍了使用postMesssage()实现iframe跨域页面间的信息传递 的相关资料,需要的朋友可以参考下
    2016-03-03

最新评论