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

 更新时间:2020年03月11日 12:03:02   作者:EJLLGCY  
这篇文章主要介绍了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">&#xe642;</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弹框式编辑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目中使用lib-flexible解决移动端适配的问题解决

    vue项目中使用lib-flexible解决移动端适配的问题解决

    这篇文章主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue router 路由跳转方法讲解

    vue router 路由跳转方法讲解

    这篇文章主要介绍了vue router 路由跳转方法概述,使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库,本文结合示例代码给大家详细讲解,需要的朋友可以参考下
    2022-12-12
  • nuxt 路由、过渡特效、中间件的实现代码

    nuxt 路由、过渡特效、中间件的实现代码

    这篇文章主要介绍了nuxt 路由、过渡特效、中间件的实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue 打包上线后的缓存问题解决

    Vue 打包上线后的缓存问题解决

    在使用vue脚手架搭建前端工程时,经常会遇到打包上线后的缓存问题,许多开发者会直接在index.html中加入类似以下代码来解决缓存问题,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-11-11
  • element el-tooltip实现自定义修改样式

    element el-tooltip实现自定义修改样式

    本文主要介绍了element el-tooltip实现自定义修改样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)

    vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)

    这篇文章主要介绍了vue+mousemove实现鼠标拖动功能,文中给大家介绍了鼠标移动过快拖动就失效问题的解决方法,需要的朋友可以参考下
    2018-08-08
  • Vue业务组件封装Table表格示例详解

    Vue业务组件封装Table表格示例详解

    这篇文章主要为大家介绍了Vue业务组件封装Table表格示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue封装组件利器之$attrs、$listeners的使用

    Vue封装组件利器之$attrs、$listeners的使用

    vue通信手段有很多种,props/emit、vuex、event bus、provide/inject等,还有一种通信方式,那就是$attrs和$listeners,下面这篇文章主要给大家介绍了关于Vue封装组件利器之$attrs、$listeners使用的相关资料,需要的朋友可以参考下
    2021-12-12
  • Vue项目中常用的实用技巧汇总

    Vue项目中常用的实用技巧汇总

    如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,这篇文章主要给大家汇总介绍了关于Vue项目中常用的实用技巧,需要的朋友可以参考下
    2021-07-07
  • vueJS简单的点击显示与隐藏的效果【实现代码】

    vueJS简单的点击显示与隐藏的效果【实现代码】

    下面小编就为大家带来一篇vueJS简单的点击显示与隐藏的效果【实现代码】。小编觉得挺不错的,现在分享给大家,一起跟随小编过来看看吧
    2016-05-05

最新评论