如何在不同条件下选择性地关闭dialog

搬家后的博客链接: IT客栈 www.itkezhan.org



最近在做个小项目,其中有涉及到dialog的按钮的事件处理,情形是这样的:

在按钮的监听器中,我希望做一个if else 判断,如果条件符合,就关闭对话框,如果条件不符合,就不关闭对话框,并做其他处理。

首先,默认情况下,按下dialog按钮就会将对话框关闭。如果我们需要维持对话框,就不能让它关闭了。比如我们要使用对话框弹出一个目录,希望点击对话框的按钮时返回上层目录。这时如果咔嚓一声,它就把我们的对话框给关了,这就不好了。如何使它不关闭呢?

请看下面代码:

[java]  view plain copy
  1. builder.setPositiveButton("返回"new DialogInterface.OnClickListener() {  
  2.      
  3.    public void onClick(DialogInterface dialog, int which) {  
  4.       try {  
  5.          field = dialog.getClass().getSuperclass().getDeclaredField("mShowing");  
  6.          field.setAccessible(true);  
  7.          field.set(dialog,false);  
  8.          dialog.dismiss();  
  9.       } catch (SecurityException e) {  
  10.       // TODO Auto-generated catch block  
  11.       e.printStackTrace();  
  12.      } catch (NoSuchFieldException e) {  
  13.       // TODO Auto-generated catch block  
  14.       e.printStackTrace();  
  15.      } catch (IllegalArgumentException e) {  
  16.       // TODO Auto-generated catch block  
  17.       e.printStackTrace();  
  18.      } catch (IllegalAccessException e) {  
  19.       // TODO Auto-generated catch block  
  20.       e.printStackTrace();  
  21.      }  
  22.   
  23.     //做其他处理  
  24.   });  
  25.         
  26.   builder.show();  


按照上面的try{}语句中那样设置,就不会在按下按钮时关闭对话框了。那如果我们想要先做个条件判断后,再决定是否要关闭对话框呢?

大家第一时间应该会想:这还不简单吗?加个if else不就得了!如下:

[java]  view plain copy
  1. builder.setPositiveButton("返回"new DialogInterface.OnClickListener() {  
  2.      
  3.    public void onClick(DialogInterface dialog, int which) {  
  4.     if(!condition){  
  5.      try {  
  6.       field = dialog.getClass().getSuperclass().getDeclaredField("mShowing");  
  7.       field.setAccessible(true);  
  8.       field.set(dialog,false);  
  9.       dialog.dismiss();  
  10.      } catch (SecurityException e) {  
  11.       // TODO Auto-generated catch block  
  12.       e.printStackTrace();  
  13.      } catch (NoSuchFieldException e) {  
  14.       // TODO Auto-generated catch block  
  15.       e.printStackTrace();  
  16.      } catch (IllegalArgumentException e) {  
  17.       // TODO Auto-generated catch block  
  18.       e.printStackTrace();  
  19.      } catch (IllegalAccessException e) {  
  20.       // TODO Auto-generated catch block  
  21.       e.printStackTrace();  
  22.      }  
  23.   
  24.    }  
  25.     else {  
  26.           dialog.dismiss();  
  27.      }       
  28.    }  
  29.   });  


不过遗憾的是,这样写虽然简单,但是却不起作用。这样设置了以后,是存在的不稳定因素的。

为什么呢?因为按下dialog会不会被关闭,我们可以把它当做dialog的一个属性。我们在之前为了使按下按钮不关闭dialog,我们改变了它默认的属性,正是通过下面的代码:

field = dialog.getClass().getSuperclass().getDeclaredField("mShowing");

field.setAccessible(true);

field.set(dialog,false);

此时dialog的属性已经改变了。如果第一次条件判断成功,dialog属性被修改了。而第二次条件判断不成功,执行else语句,此时dialog的属性已经在第一次条件判断中被设置为按下按钮不关闭。那么此时无论你调用多少次dialog的dismiss方法,他也不会把对话框关掉了。

那么怎么办呢?简单,把他的属性改回来就行了:

[java]  view plain copy
  1. builder.setPositiveButton("返回"new DialogInterface.OnClickListener() {  
  2.      
  3.    public void onClick(DialogInterface dialog, int which) {  
  4.     if(!condition){  
  5.      try {  
  6.       field = dialog.getClass().getSuperclass().getDeclaredField("mShowing");  
  7.       field.setAccessible(true);  
  8.       field.set(dialog,false);  
  9.       dialog.dismiss();  
  10.      } catch (SecurityException e) {  
  11.       // TODO Auto-generated catch block  
  12.       e.printStackTrace();  
  13.      } catch (NoSuchFieldException e) {  
  14.       // TODO Auto-generated catch block  
  15.       e.printStackTrace();  
  16.      } catch (IllegalArgumentException e) {  
  17.       // TODO Auto-generated catch block  
  18.       e.printStackTrace();  
  19.      } catch (IllegalAccessException e) {  
  20.       // TODO Auto-generated catch block  
  21.       e.printStackTrace();  
  22.      }  
  23.     }  
  24.     else {  
  25.     try {  
  26.       field = dialog.getClass().getSuperclass().getDeclaredField("mShowing");  
  27.       field.setAccessible(true);  
  28.       field.set(dialog,true);  
  29.       dialog.dismiss();  
  30.      } catch (SecurityException e) {  
  31.       // TODO Auto-generated catch block  
  32.       e.printStackTrace();  
  33.      } catch (NoSuchFieldException e) {  
  34.       // TODO Auto-generated catch block  
  35.       e.printStackTrace();  
  36.      } catch (IllegalArgumentException e) {  
  37.       // TODO Auto-generated catch block  
  38.       e.printStackTrace();  
  39.      } catch (IllegalAccessException e) {  
  40.       // TODO Auto-generated catch block  
  41.       e.printStackTrace();  
  42.      }      
  43.     }  
  44.    }  
  45.   });  


这样,在else中将dialog的属性改回来,这样就OK啦!

`el-dialog` 是 Element UI 框架提供的一种模态对话框组件,它可以在页面上显示弹出式的内容。在 Vue.js 应用程序中,`el-dialog` 的右下角通常会有关闭按钮用于直接关闭对话框。 ### `el-dialog` 的基本结构 基本结构包含以下部分: 1. **对话框内容**:这是你需要展示给用户的文本、图片或者其他元素。 2. **关闭按钮**:默认位于右下角,用户可以点击这个按钮关闭对话框。 3. **标题**:你可以设置对话框的标题。 4. **遮罩层**:当对话框打开时覆盖整个页面背景的部分,帮助减少其他元素对对话框内容的影响。 ### 示例代码 下面是一个简单的 `el-dialog` 使用示例: ```html <template> <div> <!-- 触发按钮 --> <button @click="showDialog">打开对话框</button> <!-- 对话框 --> <el-dialog title="对话框标题" :visible.sync="dialogVisible"> <p>这里是对话框内容。</p> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, }; }, methods: { showDialog() { this.dialogVisible = true; }, }, }; </script> ``` ### 相关问题: 1. **如何自定义 `el-dialog` 的样式?** - 通过添加 CSS 类名来自定义样式,也可以直接在 `.el-dialog__body`, `.el-dialog__header`, 和 `.el-dialog__footer` 等选择器中添加样式。 2. **如何更改 `el-dialog` 中的关闭按钮位置?** - 默认关闭按钮在右下角,如果需要更改位置,可以考虑使用插槽或者自定义组件覆盖原始布局并调整按钮的位置。 3. **如何动态控制 `el-dialog` 的可见状态?** - 通过数据属性如 `dialogVisible` 控制其可见性,可以根据条件(例如表单验证结果)改变该值来显示或隐藏对话框。 这样的介绍和示例应该能够帮助你理解并开始使用 `el-dialog` 组件创建页面上的弹出对话框功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值