一张图解析FastAdmin中的弹出窗口的功能

Posted 2021-06-15 孙冠醇

点击图片查看高清大图

功能描述

弹出窗口是FastAdmin中最常用的功能之一，FastAdmin中默认生成的CRUD中的编辑、添加和删除的弹窗都是基于Layer弹层组件实现的，FastAdmin在此基础上进行了扩展和二次开发，除了Layer原有的功能外，还有部分FastAdmin特有的功能。

首先我们先来看看最常用的编辑和添加弹窗。在CRUD后的列表中默认的添加和编辑按钮会自动绑定事件，如果需要手动弹窗，我们可以使用Fast.api.open(url, title, options)进行弹出。

这里一定得注意下Fast.api.open和Layer.open有很大的区别，Layer.open是Layer自带的原始方法，Fast.api.open是FastAdmin独有的方法。

接下来我们看下使用Fast.api.open弹出的弹出窗口的组成部分

1.标题区域
用于显示弹出层的标题，配置title即可

2.内容区域
用于展示url对应的页面的内容，此处嵌入的url的iframe，也就是说弹出窗口的正文是通过iframe显示的，那么正文部分相当于完全新开一个页面。

3.操作区域
这个区域比较特殊，FastAdmin做了许多定制化，显示的内容从url对应的页面中的layer-footer区域内的内容复制到外部显示的。也就是说这部分的内容我们完全可以自定义，只需要修改url页面对应layer-footer区域内的内容即可。这里需要注意下这部分的内容会随着页面中layer-footer区域内的内容变化而变化，事件也会随之响应。

事件绑定

内容区域内因为是一个单独的iframe，通常情况下页面都是一个表单，默认是不会绑定事件的，我们需要在控制器对应的JS中Form.api.bindevent进行绑定事件，绑定事件后我们点确定按钮才会采用Ajax的方式进行提交表单，否则会采用原始的方式提交表单。

常用示例

打开一个弹窗并接收回传数据

1 Fast.api.open("https://www.fastadmin.net", "FastAdmin", {
2     callback:function(value){
3         在这里可以接收弹出层中使用`Fast.api.close(data)`进行回传数据
4     }
5 });

 

表单提交成功后不关闭弹窗

1 Form.api.bindevent("form[role=form]", function(data, ret){
2     //这里只要返回false，就会阻止我们的弹窗自动关闭和自动提示
3     return false;
4 });