<强> 1。实现效果
<强> 2。实现原理
在父组件中点击编辑按钮,将当前点击对象的id传给子组件,子组件根据id修改相应的内容
父组件中代码:
//放置编辑按钮的位置
& lt;按钮类型=鞍磁ァ眂lass=發ayui-btn layui-btn-normal layui-btn-sm“v:点击=氨嗉?manage.id)”祝辞& lt;我类=發ayui-icon祝辞,# xe642; & lt;/i>编辑& lt;/button>//在方法中设计编辑()方法//需要先引入编辑组件
从“进口EditManage。/EditManage '
编辑(id) {
美元。layer.iframe ({
类型:2
标题:“编辑”,
面积:[600 px,“450 px”),
阴影:没错,
抵消:“汽车”,
内容:{
内容:EditManage,//传递的编辑组件主线
父:这,
数据:{
信息:{id: id}//传递的要编辑内容的id值
}
}
})
},
子组件EditManage代码
& lt; template>
& lt; div类=癳ditmanage容器”比;
& lt;形式类="形式" v:提交=癳ditManage”比;
祝辞& lt; div class="形式的班级”;
& lt; label>账号& lt;/label>
& lt;输入类型=拔谋尽毙枰嘉环?罢恕焙抛远瓿?肮乇铡崩?v模型“表单控件”=癿anage.account”比;
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt; label>用户名& lt;/label>
& lt;输入类型=拔谋尽毙枰嘉环?坝没白远瓿?肮乇铡崩?v模型“表单控件”=癿anage.username”比;
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt;标签在密码& lt;/label>
& lt;输入类型=懊苈搿毙枰嘉环?懊苈搿弊远瓿?肮乇铡崩?v模型“表单控件”=癿anage.password”比;
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt;标签在权限& lt;/label>
& lt;选择name=叭ㄍ崩?v模型“表单控件”=癿anage.authority”比;
& lt;选项值=" https://www.yisu.com/zixun/超级管理员”在超级管理员& lt;/option>
& lt;选项值=" https://www.yisu.com/zixun/普通管理员”在普通管理员& lt;/option>
& lt;/select>
& lt;/div>
& lt;按钮类型=疤峤弧眂lass=癰tn btn-info祝辞立即提交& lt;/button>
& lt;/form>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“addmanage”,
数据(){
返回{
管理:{},
形式:{}
}
},
道具:{//接收父组件传来的id值
信息:{
类型:对象,
默认值:()=祝辞{
返回{}
}
},
layerid: {
类型:字符串,
默认值:"
},
lydata: {
类型:对象,
默认值:()=祝辞{
返回{}
}
}
},
方法:{//用来显示对应id的编辑内容,在创建中调用
fetchManage (id) {
http.get美元。(“http://localhost: 3000/管理/? id)
不要犹豫(函数(响应){
this.manage=response.body;
})
},
editManage (e) {
如果(! this.manage.account | | ! this.manage.username | | ! this.manage.password | | ! this.manage.authority) {
layer.msg美元。(“请添加对应信息!”)
其他}{
让updateManage={
账户:this.manage.account,
用户名:this.manage.username,
密码:this.manage.password,
权威:this.manage.authority
};这个。http.put美元(" http://localhost: 3000/管理/? this.info.id updateManage)
不要犹豫(函数(响应){//关闭父组件中的编辑弹框
美元。layer.close (this.layerid);//弹出提示信息,默认时间为3秒
layer.msg美元。(“修改管理员信息成功!”);
}）;
e.preventDefault ()
}
e.preventDefault ()
}
},
创建(){//this.info.id父组件传给子组件的id值
this.fetchManage (this.info.id);
}
}
& lt;/script>
& lt; scoped>风格;
.editmanage {
保证金:8 px 20 px 20 px 20 px;
}
& lt;/style>
到此这篇关于Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)的文章就介绍到这了,更多相关Vue弹框式编辑内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
