# FastDialog-Vue

**Repository Path**: code2roc/FastDialog-Vue

## Basic Information

- **Project Name**: FastDialog-Vue
- **Description**: 基于vue.js封装的动态渲染弹出层
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 15
- **Forks**: 5
- **Created**: 2019-01-11
- **Last Updated**: 2023-03-05

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

 **基于vue.js原生封装的Modal层控件，不需要webpackage等环境，引入js，css即可开箱使用，无需在页面上提前声明Modal，随用随生成，动态渲染挂接到页面，关闭后自动移除，方便快捷，并且支持页面大小，页面传参，页面回调函数等在开发中需要使用的功能** 
查看效果请下载后部署，查看example.html页面
  
 **引入控件**   
1.引入vue.js  
2.引入fastdialog文件夹下的文件  

 **使用控件**   
普通打开页面

```
 OpenDialog("111", "打开窗口", "newpage1.html", "600", "1200");
```
参数：dialog标识，页面标题名称，页面url地址，页面高度，页面宽度   
百分比打开页面

```
OpenDialog("111", "打开窗口", "newpage1.html", "70", "80",null,null,"%");

```
注：第8个参数为宽高的单位，不传默认px   
  
打开的页面关闭后，主页面触发回调函数  

```
OpenDialog("222", "关闭窗口有回调函数", "newpage1.html", "600", "1200", AfterClose);

```

打开的页面关闭后，主页面触发回调函数,回调函数包含关闭页面传递的返回值

```
 OpenDialog("333", "回掉函数包含返回值", "newpage1.html", "600", "1200", AfterCloseWithReturn);
 function AfterCloseWithReturn(ReturnValue) {
        alert("page1回传的参数："+ReturnValue);
 }
```
打开页面并传递参数

```
 OpenDialog("444", "有回调函数并传参", "newpage1.html", "600", "1200", AfterCloseWithReturn, "125sds");
```
打开页面获取参数

```
var params = GetParams();
 if (params && params != "undefined") {
     alert("打开页面接收的参数：" + params);
}
```

关闭打开的页面

```
CloseDialog();
```
关闭打开的页面并向主页面传递返回值，配合3使用

```
CloseDialog("page1回传222222");
```
在顶层窗口打开页面，一般用于iframe中

```
OpenTopDialog("777777", "有回调函数并传参", "newpage2.html", "500", "1000", AfterCloseWithReturn, "page1-page2传参");
```
关闭顶层页面

```
CloseDialog("page2回传111111","page3");
```

注：CloseDialog方法在关闭OpenDialog的页面，无需传参，或者传返回值，关闭OpenTopDialog的页面时必须传入两个参数，ReturnValue和打开的dialog的id标识，无返回值传null，如果一个页面同时需要被 OpenDialog和OpenTopDialog打开，两个参数必传

打开普通提示窗

```
 OpenAlert("提示", "请在规定期限内处理完成！");
```
关闭提示窗关闭后触发回调事件

```
OpenAlert("提示", "请在规定期限内处理完成！",AfterClose);
```

打开成功提示窗

```
OpenSuccess("提示", "请在规定期限内处理完成！");
```
打开警告提示窗

```
 OpenWaring("提示", "请在规定期限内处理完成！",null,"知道了");
```
打开失败提示窗

```
 OpenFail("提示", "请在规定期限内处理完成！");
```
打开确认提示窗

```
OpenConfirm("确认提示", "是否删除当前数据", function () {
                    OpenSuccess("提示", "删除成功");
                });
  OpenConfirm("确认提示", "是否删除当前数据", function () {

                }, "确认删除", "取消操作");
```
注：  
1.alert类提示窗支持4个参数 标题，提示信息，回调函数，关闭按钮文字  
3.confirm提示窗支持5个参数 标题，提示信息，确认按钮回调函数，自定义确认按钮文字，自定义取消按钮文字

一些说明：
下载代码的同学查看例子时需要部署一下，因为Modal中包含了请求模板的http操作
此版本存在一些缺点，打开dialog需要网络请求html模板，请求的具体路径需要根据引入文件夹位置进行修改，现已完成基于vue工程开发的组件版本，引入js，css直接使用，详情请查看vue分支