Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)_Vue.prototype.$layer.iframe - CSDN文库

19 浏览量更新于2023-03-16 评论收藏 63KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了Vue项目中结合Vue-layer实现弹框式编辑功能,本文通过实例代码给大家介绍的非常详细，对大家的

学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

1. 实现效果实现效果

2.实现原理实现原理

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

父组件中代码：

//放置编辑按钮的位置

<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" v-on:click="edit(manage.id)"><i class="layui-icon"></i>编辑</button>

// 在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代码

<template>

<div class="editmanage container">

<form class="form" v-on:submit="editManage">

<div class="form-group">

<label>账号</label>

<input type="text" required placeholder="账号" autocomplete="off" class="form-control" v-model="manage.account">

</div>

<div class="form-group">

<label>用户名</label>

<input type="text" required placeholder="用户名" autocomplete="off" class="form-control" v-model="manage.username">

</div>

<div class="form-group">

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

Nedl002

粉丝: 148
资源: 949

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈