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 相关文章推荐
封装的原生javascript弹出层代码
Sep 24 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
Node.js返回JSONP详解
May 18 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
js模块加载方式浅析
Aug 12 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
使用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
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
javascript如何创建对象
2016/08/29 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
一道python走迷宫算法题
2018/01/22 Python
详解python3中zipfile模块用法
2018/06/18 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
浅析python实现动态规划背包问题
2020/12/31 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
strstr()的简单实现
2013/09/26 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
学生操行评语大全
2014/04/24 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript