layui弹窗传值

是文静的

于 2023-01-12 18:25:20 发布

阅读量1.4k

点赞数 1

分类专栏： layui JavaScript 文章标签： layui javascript 前端

本文链接：https://blog.csdn.net/qq_44091061/article/details/128664467

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

layui

6 篇文章 0 订阅

订阅专栏

该文章描述了一个使用layui前端框架进行页面交互的示例。当点击事件触发时，父页面打开一个弹窗并传递数据给子页面。子页面接收数据后加载内容，并提供方法向父页面回传数据。这个过程涉及到了iframe、事件处理和数据序列化。

摘要由CSDN通过智能技术生成

父页面

layui.use(['form','util', 'miniPage'], function () {
    var form = layui.form, 
        util = layui.util
        miniPage = layui.miniPage,

	//在点击事件里跳转弹窗
	$(document).on('click','.policy-channel-select',function(){
        curPolicy = 0

		//弹窗url
        let url = "";
        var openWH = miniPage.getOpenBig();
        layer.open({
            title: '选择政策渠道',
            type: 2,
            area: [openWH[0] + 'px', openWH[1] + 'px'],
            content: url,
            btn: ['确定', '取消'],
            success: function (layero, index) {
                var iframeWin = window[layero.find('iframe')[0]['name']];
                //向弹窗传参
                iframeWin.curPolicy = curPolicy;
                iframeWin.addChannelData = addChannelData;
                //调用弹窗中得方法，加载弹窗
                iframeWin.loadLayui();
            },
            yes: function (index, layero) {
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.getChannelData()
                //从弹窗中取值
                addChannelData= JSON.parse(JSON.stringify(iframeWin.addChannelData));
                var addData = []
                curPolicy= JSON.parse(JSON.stringify(iframeWin.curPolicy));
                layui.layer.close(index);
            },
            cancel: function (index, layero) {
                layer.close(index);
            }
        });
    })
 })

子页面

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="layui-card layui-row">
            <div id="selectStore">
                <div id="store_transferExtend"></div>
            </div>
        </div>
    </div>
</div>
<script>
//接受从父页面传递得值
//先拿值在加载loadLayui ()方法，确保在加载方法时已经拿到父页面传递的数据
var addChannelData = [],
curSelectPolicy = ''
function loadLayui () {
    layui.use(['form','table'], function () {
        var table =layui.table;
        var form=layui.form;

        
    });
}
//向父页面传递数据，在父页面调用当前方法时进行数据的传递
function getChannelData () {
    addChannelData = []
    curSelectPolicy = curSelectPolicy
}
</script>