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


Posted in Javascript onMarch 11, 2020

1. 实现效果

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

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">
    <label >密码</label>
    <input type="password" required placeholder="密码" autocomplete="off" class="form-control" v-model="manage.password">
   </div>

   <div class="form-group">
    <label >权限</label>
    <select name="authority" class="form-control" v-model="manage.authority">
     <option value="超级管理员" >超级管理员</option>
     <option value="普通管理员" >普通管理员</option>
    </select>
   </div>
   <button type="submit" class="btn btn-info">立即提交</button>
  </form>
 </div>
</template>

<script>
 export default {
  name: 'addmanage',
  data () {
   return {
    manage:{},
    form:{}
   }
  },
  props:{
  //接收父组件传来的id值
   info:{
    type:Object,
    default:()=>{
     return {}
    }
   },
   layerid:{
    type:String,
    default:""
   },
   lydata:{
    type:Object,
    default:()=>{
     return {}
    }
   }
  },
  methods:{
  //用来显示对应id的编辑内容,在created中调用
   fetchManage(id){
    this.$http.get('http://localhost:3000/manage/'+id)
     .then(function (response) {
      this.manage=response.body;
     })
   },
   editManage(e){
    if(!this.manage.account||!this.manage.username||!this.manage.password||!this.manage.authority){
     this.$layer.msg("请添加对应信息!")
    }else{
     let updateManage={
      account:this.manage.account,
      username:this.manage.username,
      password:this.manage.password,
      authority:this.manage.authority
     };   this.$http.put("http://localhost:3000/manage/"+this.info.id,updateManage)
      .then(function (response) {
      //关闭父组件中的编辑弹框
       this.$layer.close(this.layerid);
       //弹出提示信息,默认时间为3秒
       this.$layer.msg("修改管理员信息成功!");


      });
     e.preventDefault()
    }
    e.preventDefault()
   }
  },
  created(){
  // this.info.id父组件传给子组件的id值
   this.fetchManage(this.info.id);

  }
 }
</script>

<style scoped>
 .editmanage{
  margin:8px 20px 20px 20px;
 }
</style>

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

Javascript 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 #Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 #Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 #Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 #Javascript
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
非常漂亮的js烟花效果
Mar 10 #Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 #Javascript
You might like
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
destoon复制新模块的方法
2014/06/21 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python多线程下载文件的方法
2015/07/10 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
python验证码识别实例代码
2018/02/03 Python
详解Python中where()函数的用法
2018/03/27 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
荷兰电脑专场:Paradigit
2018/05/05 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
小学生暑假家长评语
2014/04/17 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
Js类的构建与继承案例详解
2021/09/15 Javascript
Java 多态分析
2022/04/26 Java/Android