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

1. 实现效果

2.实现原理

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

父组件中代码：

//放置编辑按钮的位置
编辑
// 在methods中设计edit()方法
//需要先引入编辑组件
import EditManage from './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:8px 20px 20px 20px;
 }

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