Ext中延迟关闭弹窗

最近做毕设,修改密码的时候,会弹窗出来,有一个修改密码框,当修改成功的时候,最下方会有提示,我的需求是修改成功后出提示,2秒后自动关闭窗口,下面是我的代码:


function change_pwd(){
		Ext.apply(top.Ext.form.VTypes,{
			password:function(val,field){
				if(field.initialPassField){
					var pwd = top.Ext.getCmp(field.initialPassField);
					return (val == pwd.getValue());
				}
				return true;
			},
			passwordText:'两次密码不一致'
		});
		Ext.onReady(function(){
			Ext.QuickTips.init();
			var closeWin = new Ext.util.DelayedTask( function(){
				win.close();
			});
			var changePasswordFrom = new top.Ext.form.FormPanel({
				width:360,
				autoHeight:120,
				bodyStyle:"background-color:#99bbe8",
				buttonAlign:'center',
				labelAlign:'right',
				labeWidth:80,
				defaultType:'textfield',
				html : '<center><font color="red"><div id="msg" class="msg"></div></font><font color="green"><div id="tipmsg" class="tipmsg"></div></font></center>',
				defaults:{
					 width:150,
					 allowBlank:false,
					 msgTarget:'under',
					 maxLength:20,
					 maxLengthText:'密码不能超过20位'
					 },
				items:[ 
					{
					 fieldLabel:'用户名',
					 name:'account',
					 value:account,
					 inputType:'textfield',
					 readOnly:true,
					 id:'account'
					},
					{
					 fieldLabel:'旧密码',
					 name:'oldPwd',
					 inputType:'password',
					 blankText:'密码不能为空',
					 id:'oldPwd'
					},{
					 fieldLabel:'新密码',
					 name:'newPwd',
					 inputType:'password',
					 blankText:'密码不能为空',
					 id:'newPwd',
					 minLength:6,
					 minLengthText:'密码不能少于6位'
					},{
					 fieldLabel:'确认新密码',
					 name:'secondPassword',
					 inputType:'password',
					 blankText:'密码不能为空',
					 vtype:'password',
					 initialPassField:'newPwd',
					 minLength:6,
					 minLengthText:'密码不能少于6位'
					},
				]
			});
	
	    var win = new top.Ext.Window({
	        title: "修改密码",
	        width: 360,
	        height: 250,
	        plain: true,
	        bodyStyle:"background-color:#99bbe8",
// 	        autoScroll: true,
	        layout:'fit',
	        //可以随意改变大小
	        resizable: true,
	        //是否可以拖动
	        //draggable:false,
	        collapsible: false, //不允许缩放条
	        closeAction: 'close',
	        closable: true,
	        //弹出模态窗体
	        modal: true,
	        buttonAlign: "center",
	        bodyStyle: "padding:10 10 10 10",
	        border :false, 
	        x:500,
	        y:250,
	        constrain :true,
	        items: [changePasswordFrom],
	        
	        buttons : [{
                         text : "提交",
                         handler : function() {
                            if (changePasswordFrom.getForm().isValid()) {
                                changePasswordFrom.getForm().submit({
                                          url : './dorm_sys/adminAction_sys_changPwd',
                                          success: function(form, response) {
												top.Ext.get("tipmsg").dom.innerHTML = "修改成功";
												top.Ext.get("msg").dom.innerHTML = "";
												closeWin.delay(2000);//延迟2秒关闭窗口
                                          },
                                          failure: function(form, response) {
                                        	  top.Ext.get("tipmsg").dom.innerHTML = "";
                                              top.Ext.get("msg").dom.innerHTML = "修改失败";
                                          }
                                       });
                            }
                         }
                     }, {
                         text:'重置',
						 handler:function(){
								changePasswordFrom.getForm().reset();
						 }
                     }]
                     
                     
	      });
          win.show();
        });
	}

关键代码:

var closeWin = new Ext.util.DelayedTask( function(){
				win.close();
			});

success: function(form, response) {
												top.Ext.get("tipmsg").dom.innerHTML = "修改成功";
												top.Ext.get("msg").dom.innerHTML = "";
												closeWin.delay(2000);//延迟2秒关闭窗口
                                          },


### uni-popup 使用教程及示例代码 #### 1. 安装与配置 在使用 `uni-popup` 前,需要从 DCloud 插件市场下载组件并将其导入到项目中。具体步骤如下: - 访问插件市场链接:[https://ext.dcloud.net.cn/plugin?id=329](https://ext.dcloud.net.cn/plugin?id=329)。 - 下载示例项目后,在路径 `uni-popup 弹出层示例\uni_modules\uni-popup` 中找到 `uni-popup` 文件夹,并将其复制到自己项目的 `uni_modules` 文件夹下[^1]。 需要注意的是,`uni-popup` 插件依赖于 `uni-transition` 插件,因此也需要将 `uni-transition` 文件夹一并复制到 `uni_modules` 文件夹中。 #### 2. 示例代码 以下为一个基本的 `uni-popup` 使用示例: ```html <template> <view> <!-- 打开弹窗按钮 --> <button @click="openPopup">打开弹窗</button> <!-- 弹出层 --> <uni-popup ref="popup" type="bottom"> <view style="width: 750rpx; background-color: #FFFFFF; border-radius: 24rpx 24rpx 0rpx 0rpx;"> <view>正常写内容就可以</view> </view> </uni-popup> </view> </template> <script> export default { methods: { openPopup() { this.$refs.popup.open(); // 打开弹窗 } } }; </script> ``` #### 3. 高级功能:搭配 `uni-popup-dialog` 如果需要实现更复杂的弹窗功能,例如输入框对话框,可以结合 `uni-popup-dialog` 组件使用。以下是示例代码: ```html <template> <view> <!-- 打开弹窗按钮 --> <button @click="openDialog">打开对话框</button> <!-- 对话框 --> <uni-popup ref="popup" type="dialog"> <uni-popup-dialog mode="input" message="请输入内容" :duration="2000" :before-close="true" @close="closeDialog" @confirm="confirmDialog"></uni-popup-dialog> </uni-popup> </view> </template> <script> export default { methods: { openDialog() { this.$refs.popup.open(); // 打开对话框 }, closeDialog() { this.$refs.popup.close(); // 关闭对话框 }, confirmDialog(value) { console.log("用户输入的内容:", value); // 获取输入框的值 this.$refs.popup.close(); // 手动关闭对话框 } } }; </script> ``` #### 4. 禁止遮盖层页面滑动 在某些场景下,用户可能希望在弹窗显示时禁止背景页面的滑动。可以通过以下方式实现: ```css /* 在弹窗显示时禁止页面滑动 */ .popup-show { overflow: hidden; height: 100vh; } ``` 然后在 Vue 组件中动态添加该类名: ```javascript export default { data() { return { isPopupShow: false }; }, methods: { openPopup() { this.isPopupShow = true; this.$refs.popup.open(); }, closePopup() { this.isPopupShow = false; this.$refs.popup.close(); } } }; ``` 并在模板中绑定类名: ```html <view :class="isPopupShow ? 'popup-show' : ''"> <!-- 页面内容 --> </view> ``` #### 5. iOS 自动弹出键盘问题 在微信小程序中,使用 `uni-popup-dialog` 的 `input` 模式时,可能会遇到 iOS 平台自动弹出键盘的问题。为解决此问题,可以在打开弹窗延迟一段时间再触发弹窗显示[^2]。 示例代码如下: ```javascript methods: { openDialog() { setTimeout(() => { this.$refs.popup.open(); }, 200); // 延迟 200ms 打开弹窗 } } ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值