好资源导航 » 文章资讯 » Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)

Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)

2023-07-29 10:58:03 72

1.实现效果

2.实现原理

在父组件中点击编辑按钮，将当前点击对象的id传给子组件，子组件根据id修改相应的内容

父组件中代码：

//放置编辑按钮的位置
编辑
//在methods中设计edit()方法
//需要先引入编辑组件
importEditManagefrom'./EditManage'
edit(id){
this.$layer.iframe({
type:2,
title:"编辑",
area:['600px','450px'],
shade:true,
offset:'auto',
content:{
content:EditManage,//传递的编辑组件主线
parent:this,
data:{
info:{id:id}//传递的要编辑内容的id值
}
}
})
},

子组件EditManage代码






.editmanage{
margin:8px20px20px20px;
}

到此这篇关于Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)的文章就介绍到这了,更多相关Vue弹框式编辑内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)

热门推荐

随机推荐