使用layer弹窗，制作编辑User信息页面

最新推荐文章于 2024-07-15 17:46:36 发布

雨降

最新推荐文章于 2024-07-15 17:46:36 发布

阅读量6.6k

点赞数 2

分类专栏：前端插件文章标签： layer

本文链接：https://blog.csdn.net/u011848397/article/details/52353744

版权

本文介绍了如何在A页面使用layer弹窗打开子页面B来编辑User信息。通过Vue动态生成HTML，处理性别选项的单选框，并在保存时通过后台接口更新数据库。后续计划优化提交方式为ajax并添加弹窗关闭后的刷新功能。

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

用户信息展示页面为A页面，编辑页面为B页面。A是B的父页面
首先在A页面添加按钮，点击触发函数，函数初始化layer弹窗
‘编辑’按钮：

<button type="button" class="btn btn-primary btn-xs" id="edit{
   {
   item.id}}" 
                    onclick="editSingle('{
   {$index}}')">修改</button>

执行函数：

var userContent//作为全局变量，之后给B页面直接调用，后面会提到
function editSingle(index){
   
    userContent = vm.content[index]
    layer.open({
        type: 2,
        title: '编辑',
        area : ['800px' , '520px'], 
        scrollbar: false,//禁止浏览器滚动
        content: 'bUser/editSingle'
        }); 
}

B页面初始化时从A页面取值，用parent.xxx

var iframe = parent.layer.getFrameIndex(window.name); //获取窗口索引，这里的B页面所在窗口的索引值为1
    var vm = new Vue({
        el:'#editUser',
        data:{
            contents:parent.userContent,//从A页面取值
            titles:['手机','密码','用户名','性别','邮箱','地区','个性签名','头像']
        }
    });