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">
    <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弹框式编辑内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于vue-video-player自定义播放器的方法

    先看一下效果. 图1--显示侧边栏 图2-收起侧边栏: 图三:全屏. 写在前面 本次项目中需要用到vue,vue-video-player,我用的是iview的ui框架,但是ui框架无妨,这里关注的是基于video.js开发的vue-video-player的使用,以及如何操作video.js中的api. vue-video-player 项目地址:https://github.com/surmon-china/vue-video-player. video.js文档地址:http://docs

  • vue-music关于Player播放器组件详解

    vue-music关于Player播放器组件详解

    本文实例为大家分享了关于Player播放器组件的具体内容,供大家参考,具体内容如下 迷你播放器: 1.播放器组件会在各个页面的情况下会打开. 首先在vuex state.js 中定义全局的播放器状态 import {playMode} from 'common/js/config.js'; const state = { singer:{}, playing:false, //是否播放 fullScreen:false, //是否全屏 playList:[], //播放列表 sequenceLi

  • 详解vue-video-player使用心得（兼容m3u8）

    下载vue-video-player npm install vue-video-player --save 在main.js文件引入 import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') Vue.use(VideoPlayer) 在页面中引入 <video-player ref="vi

  • vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

    最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频播放效果 <video-player class="vjs-custom-skin" ref="videoPlayer1" :options="playerOptions" :playsinline="true" :even

  • vue2.0+vue-dplayer实现hls播放的示例

    起因 之前写了一篇< vue2.0+vue-video-player实现hls播放>,里边有提到在用vue-video-player之前,我尝试着使用vue-dplayer实现hls播放,但是当时时间紧迫,还没有完成,就换方案了.现在抽时间把它补齐吧. 开始 安装依赖 npm install vue-dplayer -S 编写组件HelloWorld.vue <template> <div class="hello"> <d-player re

  • 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"><

  • ajax+php 谷歌搜索框自动填充功能 实例代码

    复制代码 代码如下: <html> <head> <script language="javascript"><!-- var http_request; function update(v){ if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { /

  • Vue项目引用百度地图并实现搜索定位等功能(案例分析)

    目录 一.效果图及功能点 二.前期准备 三.引入百度地图 四.功能解析 本文给大家介绍如何在vue项目中引用百度地图,并设计实现简单的地图定位.地址搜索功能. Tip:本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识. 前言:百度地图开放平台 给开发者们提供了丰富的地图功能与服务,使我们的项目中可以轻松地实现地图定位.地址搜索.路线导航等功能.本文给大家介绍如何在vue项目中引用百度地图,并设计实现简单的地图定位.地址搜索功能. 一.效果图及功能点 先来看一下效果图

  • vue项目中实现图片预览的公用组件功能

    今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件那边也会有一个查看影像的按钮. 所以,根据需求,多个组件需要用到查看影像的功能,所以考虑做一个公用组件,通过组件传值的方法将查看影像文件的入参传过去. 后来,产品要求图片可以旋转缩放. 废话不多说,贴上代码: <template> <div class="filePreview&q

  • vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

    1.首先在index.html引入高德地图的秘钥.如图: 注意:如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch,否则功能无法使用,并会报错 2. 定位功能,代码如下: const map = new AMap.Map(this.$refs.container, { resizeEnable: true }) // 创建Map实例 const options = { 'showButton': true, // 是否显示定位按钮 '

  • vue项目查看vue版本及cli版本的实现方式

    查看cli版本,执行如下: vue -V 查看vue版本 npm list vue 补充知识:vue老项目升级vue-cli3.0问题总结 升级步骤 1. 删除原vue-cli并安装vue-cli3.0 2.删除新项目中src下的内容,把原项目中src目录覆盖到新项目中 3.把router从目录文件夹改为文件,src/router/index.js提高一层变成src/router.js 4. 我的项目中src已经分为了views和components所以无需修改,如果不是这个结构需要自己区分下

  • 基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)

    1. 数据 一共包含了全国3049所大学, 从人人网拷贝的 (仅供学习交流, 请勿用于商业项目), 这是一个脚本文件, 里含的JSON对象存储了学校的信息, 格式为: 复制代码 代码如下: var schoolList=[ { "id":1, //省份id "school": [ { "id": 1001, //学校id "name": "\u6e05\u534e\u5927\u5b66" //学校名称 }

  • vue中的非父子间的通讯问题简单的实例代码

    官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head>

  • vue使用混入定义全局变量、函数、筛选器的实例代码

    说一种没人发的,利用混入mixins来实现全局变量和函数.mixins里面的方法.变量.筛选器会和组件里面的方法.变量.筛选器合并.这种方法优点是ide会有方法.变量.筛选器提示. 一.main.js文件 import Vue from 'vue' import App from './App' import router from './router' import store from './store' import mixin from './utils/mixin' Vue.proto

  • vue下拉列表功能实例代码

    最近在弄作品,做了个下拉列表.心想各位小哥哥.小姐姐可能会用到相同的需求,就把下拉列表封装一下,希望能对各位小哥哥,小姐姐有帮助 github地址: https://github.com/ClmPisces/vue-droplist 喜欢的请反手来个star,有issue的欢迎提出 安装 cnpm install vue-droplist --save 组件中导入 import DropList from 'vue-droplist' // 显示下拉列表 showDropList() { //

随机推荐