Vue SPA应用中使用Layer的iframe 弹出层,并且传值

问题来源: BOOS 竟然说喜欢有可移动可最大化的弹出层,这!!!

SPA 模式下就是这种引入Vue.js的写法

layer.open({
           type: 2,
           area: [‘840px‘, ‘550px‘],
           fixed: false, //不固定
           maxmin: true,
           title:title,
           content:url,
       });

正常引入layui.js  然后弹出,然后弹出层要调用父级层的方法,和赋值

     var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

                    parent.app.UserCheckCount=this.UserCheckCount;
                    parent.app.UserCheckList=this.UserCheckList;
                    parent.app.QuestionSelectList=this.QuestionSelectList;

                    parent.app.FatherQuestionList=this.QuestionSelectList;
                    parent.app.FatherQuestionMake();

                    console.log(parent.app.QuestionList);
                    parent.app.QuestionSelectKey=this.QuestionSelectKey;
                    parent.app.QuesctionPageMake();

                    parent.layer.close(index);

注意app是父级new 出来Vue的变量名

然后就可以愉快的玩耍了

!!!

原文地址:https://www.cnblogs.com/wlphp/p/10542386.html

时间: 2024-10-29 00:42:26

Vue SPA应用中使用Layer的iframe 弹出层,并且传值的相关文章

layer实现关闭弹出层刷新父界面功能详解

方案一: 在layer弹出层中调用父界面重新加载函数 ? 1 2 3 window.parent.location.reload(); varindex = parent.layer.getFrameIndex(window.name); parent.layer.close(index); 方案二: 调用layer插件的end回调方法: end - 层销毁后触发的回调 类型:Function,默认:null 无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数. 父窗口打开lay

求出数组中所有数字的和&&弹出层效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

iframe弹出层中关闭包含iframe的div(子页面调用父页面js函数)

父页面: <div id="win2" style=" width:300px; height:200px; border:1px solid red;"> <iframe style="height:182px; width:300px;" src="1.html"></iframe> </div> js: function closeIframe(){ $("#wi

layer(jQuery弹出层插件)

弹窗alert:默认确定按钮+右上角关闭 top.layer.alert("请选择要删除的记录!",{shade: 0.3,offset:'250px'}); 弹窗alert:默认确定按钮(closeBtn:false是让关闭失效隐藏) top.layer.alert("请选择要删除的记录!",{closeBtn:false,shift:2}); 弹窗confirm:两个重新命名按钮(closeBtn:false是让关闭失效隐藏) 弹窗msg:提示信息(1秒后消失并

在vue中继续使用layer.js来做弹出层---切图网

layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导入,这时就需要修改一下它的源码.在看过它的源码后,发现需要修改的地方只有两处, 源码中已经暴露了一个全局变量layer,故只需在脚本末尾处添加 export default layer; 这表示将这个全局变量导出. 然后在文件中找到下面的代码注释掉,这段代码是为layer添加样式的,但使用的路径不对

asp.net中获取Layer弹出层返回值

1.MainPage.aspx中点击按钮利用Layer弹出层,代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="demo.MainPage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh

layer弹出层的iframe页面回调

$("#ChoiceBank").click(function () { var width = $("#content").css("Width"); layer.open({ type: 2, title: '开户银行选择', area: [width, '380px'], content: ['/Bank.aspx', 'no'], btn: ['确定', '取消'], yes: function (index, layero) { var

利用JS弹出层实现简单的动态提示“正在加载中,请稍等...”

JQuery版本:1.7.1: 编写一个JS类(ck.layer.js): [javascript] view plaincopy /************************************* Achievo.Javascript Library ************************** * Using jQuery 1.7.1 * Using cks.js 1.0.1 * Name : ck.layer.js * Create by Angle.Yang on 20

layer关闭弹出层,弹出打印

常规的话,下面能够完成关闭弹出层 var index = parent.layer.getFrameIndex(window.name); //延迟关闭 解决打印窗口弹不出来的情况 parent.layer.close(index); 可是当这里需要关闭的同时弹出打印窗口的时候,就会发现失效了,能关闭,可是打印窗口同时也弹不出了. 这里的解决办法就是:延迟关闭. $("#ReviewArea").jqprint({ debug: false, //如果是true则可以显示iframe查