PopUpManager--createPopUp与addPopUp区别

本文介绍如何使用Flex框架创建自定义弹出窗口(TitleWindow),包括两种方法:一是直接创建TitleWindow并设置属性,二是先设置弹出方式再创建TitleWindow对象。这两种方法在实现弹窗时有不同的顺序。
Java代码
  1. <?xml version= "1.0"  encoding= "utf-8" ?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   
  3.         layout="vertical"   
  4.         verticalAlign="middle"   
  5.         backgroundColor="white"   
  6.         creationComplete="init()" >  
  7.   
  8.     <mx:Script>  
  9.         <![CDATA[  
  10.             import  mx.controls.Label;  
  11.             import  mx.events.CloseEvent;  
  12.             import  mx.containers.TitleWindow;  
  13.             import  mx.managers.PopUpManager ;  
  14.   
  15.             private  var titleWindow:TitleWindow;  
  16.   
  17.             private  function init(): void  {  
  18.                 var label:Label = new  Label();  
  19.                 label.text = "Hello world" ;  
  20.   
  21.                 titleWindow = new  TitleWindow();  
  22.                 titleWindow.title = "Custom title" ;  
  23.                 titleWindow.showCloseButton = true ;  
  24.                 titleWindow.width = 240 ;  
  25.                 titleWindow.height = 180 ;  
  26.                 titleWindow.addEventListener(CloseEvent.CLOSE, titleWindow_close);  
  27.                 titleWindow.addChild(label);  
  28.   
  29.                 PopUpManager .addPopUp(titleWindow, thistrue );  
  30.                 PopUpManager .centerPopUp(titleWindow);  
  31.             }  
  32.   
  33.             private  function titleWindow_close(evt:CloseEvent): void  {  
  34.                 PopUpManager .removePopUp(titleWindow);  
  35.             }  
  36.         ]]>  
  37.     </mx:Script>  
  38.   
  39.     <mx:Button label="Launch TitleWindow"  click= "init()"  />  
  40.   
  41. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.controls.Label;
            import mx.events.CloseEvent;
            import mx.containers.TitleWindow;
            import mx.managers.PopUpManager

;

            private var titleWindow:TitleWindow;

            private function init():void {
                var label:Label = new Label();
                label.text = "Hello world";

                titleWindow = new TitleWindow();
                titleWindow.title = "Custom title";
                titleWindow.showCloseButton = true;
                titleWindow.width = 240;
                titleWindow.height = 180;
                titleWindow.addEventListener(CloseEvent.CLOSE, titleWindow_close);
                titleWindow.addChild(label);

                PopUpManager

.addPopUp(titleWindow, this, true);
                PopUpManager

.centerPopUp(titleWindow);
            }

            private function titleWindow_close(evt:CloseEvent):void {
                PopUpManager

.removePopUp(titleWindow);
            }
        ]]>
    </mx:Script>

    <mx:Button label="Launch TitleWindow" click="init()" />

</mx:Application>

 

createPopUp 代码:

Java代码
  1. <?xml version= "1.0"  encoding= "utf-8" ?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   
  3.         layout="vertical"   
  4.         verticalAlign="middle"   
  5.         backgroundColor="white"   
  6.         creationComplete="init()" >  
  7.   
  8.     <mx:Script>  
  9.         <![CDATA[  
  10.             import  mx.managers.PopUpManagerChildList;  
  11.             import  mx.controls.Label;  
  12.             import  mx.events.CloseEvent;  
  13.             import  mx.containers.TitleWindow;  
  14.             import  mx.managers.PopUpManager ;  
  15.   
  16.             private  var titleWindow:TitleWindow;  
  17.   
  18.             private  function init(): void  {  
  19.                 var label:Label = new  Label();  
  20.                 label.text = "Hello world" ;  
  21.                 titleWindow = new  TitleWindow();  
  22.                 titleWindow = TitleWindow(PopUpManager .createPopUp (this ,TitleWindow, true ));  
  23.                 titleWindow.title = "Custom title" ;  
  24.                 titleWindow.showCloseButton = true ;  
  25.                 titleWindow.width = 240 ;  
  26.                 titleWindow.height = 180 ;  
  27.                 titleWindow.addChild(label);  
  28.                 titleWindow.addEventListener(CloseEvent.CLOSE, titleWindow_close);  
  29.                                PopUpManager .centerPopUp(titleWindow);  
  30.             }  
  31.   
  32.             private  function titleWindow_close(evt:CloseEvent): void  {  
  33.                 PopUpManager .removePopUp(titleWindow);  
  34.             }  
  35.         ]]>  
  36.     </mx:Script>  
  37.   
  38.     <mx:Button label="Launch TitleWindow"  click= "init()"  />  
  39.   
  40. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
        	import mx.managers.PopUpManagerChildList;
            import mx.controls.Label;
            import mx.events.CloseEvent;
            import mx.containers.TitleWindow;
            import mx.managers.PopUpManager

;

            private var titleWindow:TitleWindow;

            private function init():void {
                var label:Label = new Label();
                label.text = "Hello world";
                titleWindow = new TitleWindow();
				titleWindow = TitleWindow(PopUpManager

.createPopUp

(this,TitleWindow,true));
				titleWindow.title = "Custom title";
                titleWindow.showCloseButton = true;
                titleWindow.width = 240;
                titleWindow.height = 180;
				titleWindow.addChild(label);
                titleWindow.addEventListener(CloseEvent.CLOSE, titleWindow_close);
                               PopUpManager

.centerPopUp(titleWindow);
            }

            private function titleWindow_close(evt:CloseEvent):void {
                PopUpManager

.removePopUp(titleWindow);
            }
        ]]>
    </mx:Script>

    <mx:Button label="Launch TitleWindow" click="init()" />

</mx:Application>

 createPopUp :是上来先设置好弹出方式,然后在new出来一个TitleWindow的对象,然后通过此对象设置他的变现形式。

addPopUp:是先new出来对象,设置好表现形式,然后在选择弹出来的方式。

一定要注意new对象与弹出方式的先后顺序。

<think>我们正在处理一个关于el-popover嵌套使用的问题。根据提供的引用,我们可以总结以下几点关键信息:1.引用[1]指出:当el-popover内嵌套select时,选择后popover会自动关闭。这是因为select的下拉框DOM被添加到body中,popover的实际DOM关系是兄弟元素,因此点击下拉框的行为会被视为在popover外部点击,导致popover关闭。2.引用[2]提供了自定义popover样式的示例,以及解决在table中展示不完整的问题。3.引用[3]则提供了一种解决弹窗层级(z-index)问题的方案,通过重置PopupManager的z-index来避免嵌套弹窗时层级累加的副作用。用户需求:查找el-popover嵌套使用的解决方案或示例。针对嵌套使用el-popover,常见问题及解决方案如下:###问题1:嵌套内容导致popover意外关闭(如引用[1]所述)当popover内部有嵌套的组件(如下拉选择框)时,由于这些组件的弹出层被挂载到body上,点击这些组件会被认为点击了popover外部,导致popover关闭。####解决方案:-方案1:使用`popper-append-to-body`属性。对于el-popover,可以设置`:append-to-body="false"`,这样popover的DOM不会挂载到body上,而是作为其父元素的子元素。但是,对于嵌套的select,我们同样需要设置select的下拉框不挂载到body上(在element-ui中,select有`popper-append-to-body`属性,设置为false)。注意:这样可能会引起样式问题(如被遮挡),需要调整样式。-方案2:在popover上设置`ref`,然后通过编程方式控制popover的显示和隐藏。例如,在select的`change`事件中,我们手动关闭popover是不合适的,因为用户可能希望保持popover打开。所以我们可以通过阻止popover关闭事件(`before-close`)来避免自动关闭。但要注意,这可能会干扰正常的关闭行为。###问题2:嵌套popover的层级(z-index)问题(如引用[3]所述)当多层弹窗(popover、dialog等)嵌套时,可能会出现层级错乱,后面的弹窗被前面的遮挡。####解决方案:-引用[3]提供了一种方案:在每次关闭弹窗时重置PopupManager的z-index。PopupManager是element-ui内部管理弹窗层级的工具。我们可以通过记录前一个z-index,然后在弹窗关闭时恢复,避免层级累加。###示例代码:嵌套使用el-popover下面是一个简单的示例,展示如何在el-popover内嵌套另一个el-popover(或select)并避免自动关闭的问题。```vue<template><div><el-buttonv-popover:popover1>点击打开外层popover</el-button><el-popoverref="popover1"placement="bottom"width="400"trigger="click":append-to-body="false"><div><p>外层popover内容</p><el-buttonv-popover:popover2>点击打开内层popover</el-button></div></el-popover><el-popoverref="popover2"placement="right"width="200"trigger="click":append-to-body="false"><div><p>内层popover内容</p></div></el-popover></div></template>```**注意**:-上述示例中,我们将两个popover的`append-to-body`都设置为false,这样它们就会按照DOM顺序嵌套,内层popover的点击事件不会触发外层popover的关闭。-但是,如果内层popover的内容超出了外层popover的范围,可能会被遮挡,这时需要调整样式(如设置`overflow:visible`)或调整位置。###嵌套select的示例```vue<template><div><el-buttonv-popover:popover>打开popover</el-button><el-popoverref="popover"placement="bottom"width="400"trigger="click":append-to-body="false"><div><p>popover内容</p><el-selectv-model="value":popper-append-to-body="false"><el-optionv-for="iteminoptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></div></el-popover></div></template><script>exportdefault{data(){return{value:'',options:[{value:'1',label:'选项1'},{value:'2',label:'选项2'},],};},};</script>```###注意事项1.样式调整:由于设置`append-to-body="false"`,popover的样式可能会受到父容器样式的影响(如溢出隐藏),需要根据实际情况调整样式。2.层级问题:对于多层嵌套,可能需要手动管理z-index,或者参考引用[3]的方法在关闭弹窗时重置PopupManager的z-index。3.性能:如果嵌套层级过深,可能会导致性能问题,应尽量避免过深的嵌套。§§相关问题§§1.如何解决el-popover嵌套select时选择后popover自动关闭的问题?2.el-popover嵌套使用时如何调整样式以避免显示不全?3.在element-ui中如何管理多个弹窗的层级(z-index)?4.如何避免嵌套的el-popover之间的事件冲突?</think>### el-popover 嵌套使用解决方案 在 Element UI 中实现 `el-popover` 嵌套使用时,主要需要解决两个核心问题:**事件冒泡导致的意外关闭** 和 **弹窗层级管理**。以下是具体解决方案和示例: --- #### 解决方案一:阻止事件冒泡(推荐) 当嵌套的 `el-popover` 触发时,父级 popover 会因事件冒泡而关闭。通过 `stop` 修饰符阻止事件冒泡可解决此问题: ```vue <template> <!-- 外层 popover --> <el-popover placement="right" trigger="click" v-model="outerVisible"> <div> <p>外层弹窗内容</p> <!-- 内层 popover - 添加 .stop 修饰符 --> <el-popover placement="bottom" trigger="click" v-model="innerVisible" @click.native.stop> <!-- 关键:阻止事件冒泡 --> <div>内层弹窗内容</div> <el-button slot="reference">打开内层弹窗</el-button> </el-popover> </div> <el-button slot="reference">打开外层弹窗</el-button> </el-popover> </template> <script> export default { data() { return { outerVisible: false, innerVisible: false } } } </script> ``` --- #### 解决方案二:手动控制显隐状态 通过编程方式管理弹窗状态,避免自动关闭: ```vue <template> <el-popover ref="outerPopover" placement="right" trigger="manual" v-model="outerVisible"> <div> <el-button @click="openInner">打开内层弹窗</el-button> <el-popover ref="innerPopover" placement="bottom" trigger="manual" v-model="innerVisible"> <div>内层内容</div> <div slot="reference"></div> <!-- 空插槽 --> </el-popover> </div> <el-button slot="reference" @click="outerVisible=!outerVisible"> 打开外层弹窗 </el-button> </el-popover> </template> <script> export default { data() { return { outerVisible: false, innerVisible: false } }, methods: { openInner() { this.innerVisible = true // 阻止外层关闭 this.$refs.outerPopover.doClose = () => {} // 覆盖关闭方法 } } } </script> ``` --- #### 解决方案三:嵌套组件层级管理 当多层弹窗嵌套时,需处理 `z-index` 累加问题[^3]: ```vue <template> <el-popover v-model="visible" :popper-options="{ zIndex: 9001 }"> <!-- 内容 --> <nested-component @close="resetZIndex" /> <!-- 嵌套组件 --> </el-popover> </template> <script> import { PopupManager } from 'element-ui/lib/utils/popup' export default { data: () => ({ visible: false }), methods: { resetZIndex() { // 关闭时重置全局 z-index PopupManager.zIndex = 9001 // 恢复基准值 } } } </script> ``` --- ### 关键注意事项 1. **事件隔离** 嵌套组件需使用 `.stop` 修饰符阻止事件冒泡,或使用 `trigger="manual"` 手动控制状态。 2. **DOM 挂载位置** 默认情况下 popover 内容挂载到 `body`,可通过 `append-to-body=false` 改为挂载到父元素内: ```vue <el-popover :append-to-body="false"> ... </el-popover> ``` 3. **样式覆盖** 深度覆盖样式解决显示不全问题[^2]: ```css /* 确保弹窗足够大 */ .el-popover__wrapper { max-width: 500px !important; } ``` 4. **移动端适配** 嵌套时建议减少层级深度,避免在小屏幕设备上显示异常。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值