简介:基于vue封装的Modal弹出层,包含html页面打开,提示,确认等常用diaog打开形式,引入js,css即可开箱使用,无需在页面上提前声明Modal,随用随生成,动态渲染挂接到页面,关闭后自动移除,方便快捷,并且支持页面大 ...
基于vue封装的Modal弹出层,包含html页面打开,提示,确认等常用diaog打开形式,引入js,css即可开箱使用,无需在页面上提前声明Modal,随用随生成,动态渲染挂接到页面,关闭后自动移除,方便快捷,并且支持页面大小,页面传参,页面回调函数等在开发中需要使用的功能引入控件1.引入vue.js 2.引入dist文件夹下的fastdialog.js和fastdialog.css文件,详情可查看test分支,为演示示例 使用控件首先,页面初始化化vue需要用变量存一下 var app1 = new Vue({}) 普通打开页面 app1.$fastdialog.OpenDialog("111", "打开窗口", "newpage1.html", "600", "1200"); 参数:dialog标识,页面标题名称,页面url地址,页面高度,页面宽度 百分比打开页面 app1.$fastdialog.OpenDialog("111", "打开窗口", "newpage1.html", "70", "80",null,null,"%"); 注:第8个参数为宽高的单位,不传默认px 打开的页面关闭后,主页面触发回调函数 app1.$fastdialog.OpenDialog("222", "关闭窗口有回调函数", "newpage1.html", "600", "1200", AfterClose); 打开的页面关闭后,主页面触发回调函数,回调函数包含关闭页面传递的返回值 app1.$fastdialog.OpenDialog("333", "回掉函数包含返回值", "newpage1.html", "600", "1200", AfterCloseWithReturn); function AfterCloseWithReturn(ReturnValue) { alert("page1回传的参数:"+ReturnValue); } 打开页面并传递参数 OpenDialog("444", "有回调函数并传参", "newpage1.html", "600", "1200", AfterCloseWithReturn, "125sds"); 打开页面获取参数 var params = app1.$fastdialog.GetParams(); if (params && params != "undefined") { alert("打开页面接收的参数:" + params);} 关闭打开的页面 app1.$fastdialog.CloseDialog(); 关闭打开的页面并向主页面传递返回值,配合3使用 app1.$fastdialog.CloseDialog("page1回传222222"); 在顶层窗口打开页面,一般用于iframe中 app1.$fastdialog.OpenTopDialog("777777", "有回调函数并传参", "newpage2.html", "500", "1000", AfterCloseWithReturn, "page1-page2传参"); 关闭顶层页面 app1.$fastdialog.CloseDialog("page2回传111111","page3"); 注:CloseDialog方法在关闭OpenDialog的页面,无需传参,或者传返回值,关闭OpenTopDialog的页面时必须传入两个参数,ReturnValue和打开的dialog的id标识,无返回值传null,如果一个页面同时需要被 OpenDialog和OpenTopDialog打开,两个参数必传 打开普通提示窗 app1.$fastdialog.OpenAlert("提示", "请在规定期限内处理完成!"); 关闭提示窗关闭后触发回调事件 app1.$fastdialog.OpenAlert("提示", "请在规定期限内处理完成!",AfterClose); 打开成功提示窗 app1.$fastdialog.OpenSuccess("提示", "请在规定期限内处理完成!"); 打开警告提示窗 app1.$fastdialog.OpenWaring("提示", "请在规定期限内处理完成!",null,"知道了"); 打开失败提示窗 app1.$fastdialog.OpenFail("提示", "请在规定期限内处理完成!"); 打开确认提示窗 app1.$fastdialog.OpenConfirm("确认提示", "是否删除当前数据", function () { app1.$fastdialog.OpenSuccess("提示", "删除成功"); }); app1.$fastdialog.OpenConfirm("确认提示", "是否删除当前数据", function () { }, "确认删除", "取消操作"); 注: 1.alert类提示窗支持4个参数 标题,提示信息,回调函数,关闭按钮文字 3.confirm提示窗支持5个参数 标题,提示信息,确认按钮回调函数,自定义确认按钮文字,自定义取消按钮文字 一些说明: 下载代码的同学查看例子时需要部署一下,因为Modal中包含了请求模板的http操作 项目地址https://gitee.com/grassprogramming/FastDialog-Vue 示例:http://grassprogramming.gitee.io/fastdialog-vue/example.html 本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱2522407257@qq.com。更多相关资讯,请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。 |