返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现弹窗引用另一个页面窗口
  • 333
分享到

vue实现弹窗引用另一个页面窗口

2024-04-02 19:04:59 333人浏览 安东尼
摘要

目录弹窗引用另一个页面窗口弹窗如何嵌入其它页面A页面(父页面)B页面(子页面)弹窗引用另一个页面窗口 需求:在一个主页面A.Vue上点击按钮时弹出一个窗口,该窗口的定义在B.vue,

弹窗引用另一个页面窗口

需求:在一个主页面A.Vue上点击按钮时弹出一个窗口,该窗口的定义在B.vue,比如修改,需要从A.vue传参到B.vue,修改完成后,刷新A.vue. 实现

页面定义,有2个文件,在index.vue上有个【修改】按钮,点击弹出testDialog.vue定义的窗口,如下

testDialog.vue

<template>
  <!-- 添加或修改业务对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false" append-to-body>
    <el-fORM ref="bizform" :model="bizform" label-width="80px">
      <el-form-item label="业务名称" prop="bizName">
        <el-input v-model="bizform.bizName" placeholder="请输入业务名称"/>
      </el-form-item>
      <el-form-item label="业务编码" prop="bizCode">
        <el-input v-model="bizform.bizCode" placeholder="请输入编码名称"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
    import {getById, addBizDefine, updateBizDefine} from "@/api/funds/routecenter/bizdefine";
    export default {
        name: "testDialog",
        data() {
            return {
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 表单参数
                bizform: {}
            };
        },
        methods: {
            // 窗口初始化方法,nextTick方法可以添加逻辑,如打开窗口时查询数据填充
            init(bizId) {
                this.open = true;
                this.$nextTick(() => {
                    getById(bizId).then(response => {
                        this.bizform = response.data;
                        this.open = true;
                        this.title = "修改业务";
                    });
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            
            submitForm: function () {
                this.$refs["bizform"].validate(valid => {
                    if (valid) {
                        if (this.bizform.id != undefined) {
                            updateBizDefine(this.bizform).then(response => {
                                if (response.data) {
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    // 调用主页面的getList方法刷新主页面
                                    this.$parent.getList();
                                } else {
                                    this.msgError(response.resultMsg);
                                }
                            });
                        } else {
                            addBizDefine(this.bizform).then(response => {
                                if (response.data) {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    // 调用主页面的getList方法刷新主页面
                                    this.$parent.getList();
                                } else {
                                    this.msgError(response.resultMsg);
                                }
                            });
                        }
                    }
                });
            }
        }
    };
</script>

index.vue中定义一个button,其它代码省略

<template>
    <!-- 打开测试窗口按钮 -->
    <el-button
           type="primary"
           icon="el-icon-plus"
           size="mini"
           @click="handleDialog"
    >测试弹窗
    </el-button>
    <!-- 使用组件-->
    <testDialog title="测试窗口" v-if="openDialog" ref="testDialog"/>
</template>
<script>
    // 引用组件
    import testDialog from "./testDialog";
    import {queryBizDefine} from "@/api/funds/routecenter/bizdefine";
    export default {
        // 注册组件
        components: {testDialog},
        data() {
            return {
                // 显示窗口
                openDialog: false
            };
        },
        methods: {
            
            getList() {
                this.loading = true;
                queryBizDefine(this.queryParams).then(response => {
                    this.bizList = response.data.rows;
                    this.total = response.data.total;
                    this.loading = false;
                });
            },
            // 按钮方法
            handleDialog() {
                this.openDialog = true;
                this.$nextTick(() => {
                    this.$refs.testDialog.init(2);
                });
            }
        }
    };
</script>

测试效果,上图是把id为2传了进来,在另一个页面能查出来,并显示

修改后能刷新主页面

弹窗如何嵌入其它页面

直接上代码。

代码使用的是Element-ui。

A页面(父页面)

将B页面当作组件引入。

import taskLogList from '../dialogPage/index.vue'
export default {  
  components:{
      dialogPage
    },
...
}

将组件引入放到HTML代码中

 <dialogPage 
    v-if="formPageVisible" 
    ref="formPageRef" 
    :queryId="logDialog.queryId">
</dialogPage >

代码说明

  • queryId:自定义的传值参数。 目的是将值从父页面传递到子页面去。
  • formPageVisible:显示参数。

在调用当前弹窗的方法里面进行如下设置

methods:{
    ...
 
    
    showLog(obj){
 
        //显示
        this.formPageVisible = true;
 
        //赋值
        this.queryId= obj.queryId;
 
        //调用子页面方法
        this.$nextTick(()=>{
            
          this.$refs.formPageRef.getlist();
        })
      }
}

基本上A页面已经可以退休了。

下面B页面开始上场。

B页面(子页面)

B页面主要的工作是两个。

1、获取A页面的传值

2、方法的实现。

1、获取A页面的传值

传值的话,在Vue中。一般在props中进行设置。

 export default {
    props: {
      queryId:{
        type: String,
        default: '',
      },
    },
 ...

在这个里面,queryId是前面传递过来的参数。

2、方法的实现

省略....

对了,记得把B页面设置为dialog。否则弹窗的效果可能不能实现哦。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue实现弹窗引用另一个页面窗口

本文链接: https://lsjlt.com/news/146890.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue实现弹窗引用另一个页面窗口
    目录弹窗引用另一个页面窗口弹窗如何嵌入其它页面A页面(父页面)B页面(子页面)弹窗引用另一个页面窗口 需求:在一个主页面A.vue上点击按钮时弹出一个窗口,该窗口的定义在B.vue,...
    99+
    2024-04-02
  • vue如何实现一个弹窗插件
    这篇文章主要讲解了“vue如何实现一个弹窗插件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue如何实现一个弹窗插件”吧!popup.vue<template> &l...
    99+
    2023-07-04
  • vue中怎么实现一个弹窗插件
    vue中怎么实现一个弹窗插件,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。popup.vue<template>  ...
    99+
    2024-04-02
  • jsp实现跳转页面和弹窗
    以下是详细的步骤来使用 JSP 实现页面跳转和弹窗的示例: 创建两个 JSP 文件:page1.jsp 和 popup.jsp。 打开 page1.jsp,添加以下内容来实现页面跳转:         Page 1     ...
    99+
    2023-09-05
    java 前端 servlet
  • 如何使用vue实现一个toast弹窗组件
    本篇内容介绍了“如何使用vue实现一个toast弹窗组件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!首先,我们来分析一下弹窗组件的特性(需...
    99+
    2023-07-04
  • vue中怎么实现一个toast弹窗组件
    本篇文章给大家分享的是有关vue中怎么实现一个toast弹窗组件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。首先,我们来分析一下弹窗组件的特...
    99+
    2024-04-02
  • vue实现弹窗翻页多选效果
    本文实例为大家分享了vue实现弹窗翻页多选效果的具体代码,供大家参考,具体内容如下 最终效果 点选择按钮后,弹出选择用户弹窗,可翻页勾多个用户  完整代码 <te...
    99+
    2024-04-02
  • html怎么在一个页面引用另一个页面
    html 中引用另一个页面有两种主要方法:iframe 用于嵌入独立框架(可指定 url),object 用于直接嵌入文档(具有更多加载控制)。选择方法取决于是否需要隔离性和加载控制,i...
    99+
    2024-05-22
  • javascript使用alert实现一个精美的弹窗
    目录一、为什么抛弃了alert 1. 不同浏览器的表现2. 第三方组件的使用3. 代码意识的控制二、用alert实现一个精美弹窗1. 弹窗HTML元素的布局2. ...
    99+
    2023-02-22
    javascript alert弹窗 javascript 弹窗
  • 怎么用C#实现一个QQ聊天窗口
    这期内容当中小编将会给大家带来有关怎么用C#实现一个QQ聊天窗口,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。using System;using System.Collections...
    99+
    2023-06-20
  • javascript怎么使用alert实现一个精美的弹窗
    这篇文章主要讲解了“javascript怎么使用alert实现一个精美的弹窗”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript怎么使用alert实现一个精美的弹窗”吧!一、为...
    99+
    2023-07-05
  • vue带参数跳转打开新页面、新窗口怎么实现
    今天小编给大家分享一下vue带参数跳转打开新页面、新窗口怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。vue带参数跳...
    99+
    2023-07-06
  • Vue3 实现一个自定义toast 小弹窗功能
    目录前言:下面是正文:一. 前置任务:JSX和渲染函数的概念二. createVnode函数的意义三. 编写Toast组件(不使用tsx)四. Toast居中的思路五. Toast三...
    99+
    2024-04-02
  • 封装一个vue中也可使用的uniapp的全局弹窗组件(任何页面都可以弹出)
    目录效果图:场景:思路:第一步:第二步:第三部:使用总结效果图: 场景: 当你对接websocket时,或者轮询也好,你需要获取到最新的信息,并且在任何页面弹出一个组件进行后续操作...
    99+
    2023-02-23
    uniapp 全局弹窗 vue弹窗组件 uniapp 全局组件
  • Vue中如何在新窗口打开页面及使用Vue-router
    这篇文章将为大家详细讲解有关Vue中如何在新窗口打开页面及使用Vue-router,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。背景在开发提分加项目的过程中,遇到了点击下...
    99+
    2024-04-02
  • 利用dialog怎么弹出一个确认与取消窗口
    本篇文章给大家分享的是有关利用dialog怎么弹出一个确认与取消窗口,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。实例如下:public static Al...
    99+
    2023-05-31
    dialog 确认
  • 在Android应用中怎么利用dialog实现一个支付密码界面弹窗
    这篇文章将为大家详细讲解有关在Android应用中怎么利用dialog实现一个支付密码界面弹窗,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。实现过程1,先写xml文件:dialog_keyb...
    99+
    2023-05-31
    android roi dialog
  • Vue结合Openlayers使用Overlay添加Popup弹窗实现
    最近使用 Vue 和 Openlayers 写了一个简单的小 dom ,用到了 Overlay 的弹窗功能,记录一下! 实验数据:test.xls 项目运行效果 创建元素: ...
    99+
    2024-04-02
  • 怎么在Android中利用marker自定义一个弹框窗口
    怎么在Android中利用marker自定义一个弹框窗口?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。Android是什么Android是一种基于Linux内核的自由及开放源代...
    99+
    2023-06-14
  • vue.extend中怎么实现一个alert模态框弹窗组件
    这篇文章将为大家详细讲解有关vue.extend中怎么实现一个alert模态框弹窗组件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。alert.js文件代码...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作