记录一下Element ui （dialog弹框）封装在组件中 在父组件调用的注意事项

最新推荐文章于 2024-07-23 10:29:33 发布
最新推荐文章于 2024-07-23 10:29:33 发布
阅读量5.1k 收藏 1
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15419785/article/details/89918300
版权
本文主要探讨了如何将Element UI的Dialog弹框组件进行封装并在父组件中调用，重点关注在非父子组件传值、组件复用以及路由跳转时的数据获取问题。介绍了两种不同的处理方式，包括利用beforeRouteEnter和beforeRouteUpdate钩子函数，并着重讨论了当Dialog封装在组件内，通过传值控制时遇到的问题及其解决方案。
摘要由CSDN通过智能技术生成

这里写自定义目录标题

记录一下Element ui （dialog弹框）封装在组件中 在父组件调用的注意事项

1：我们知道当从一个组件通过传值到另一个页面例：从列表页带参数ID，到详情页（这里是非父子关系），该详情页会被复用，那么获取详情ID，就要用到 beforeRouteEnter 组件内钩子函数，在next()回调函数中获取id并发送请求这是第一种方式
3：假如我们从详情页再次跳转至详情页,仍然带参数id，此时，同一组件的跳转则这次beforeRouteEnter钩子函数不会执行，取而代之的是beforeRouteUpdate钩子函数，来获取传进来的值。这是第二种方式
4：就是今天要说的主题，当把dialog弹框封装在一个组件内，并在父页面调用，通过传值的方式控制show or false,它大概是这样的
在这里插入图片描述
此时在列表页 点击比如：详情，查看，编辑时，同一组件跳转，第二次不会接受到传进的id,代码

最低0.47元/天 解锁文章
十三沉
关注
专栏目录
Vue - 在纯 JS 文件中调用自定义组件 / 类似 ElementUI 弹框组件 Message、Modal（在纯 js 文件中通过 import 方式引入并调用弹框模态框组件显示出来,）
王佳斌
07-07 3564
但框架的弹框可能无法满足您的需求，而这时候我们需要自定义一个组件，本文从 0 -1 提供整个过程，帮您在 纯 JS 文件中调用自定义组件 的方法，来打开自定义组件。常见于 请求封装拦截器那块，捕获到登录失效时 弹出登录框 需求。您只需要一路复制粘贴，仅需 2 步，稍微改改即可。在 文件夹下，新建 文件，您直接一键复制全部 Vue 使用js来调用一个组件，js中如何自定义组件，Vue 项目中,在Vue 使用js来调用一个组件，js中如何自定义组件，Vue 项目中,在js文件中调用组件 ,并且注册成全局，
ElementUI （dialog弹框）封装在组件中 在父组件调用
小猫爪子
12-10 1442
再记一遍dialog在父组件中的调用问题！！ 具体实现：v-for循环生成的一个card信息，点击详情查看该card具体信息，详情页在dialog里显示。 下面记录一下代码（都是前端写死的数据）： index.vue //展示页面 <template> <basic-container> <el-row v-for="(item, index) in dataList" :key="item.id" > <div :class="inde
js 模态窗口 关闭刷新父窗口或跳转页面
hujunsong的专栏
09-03 4267
父窗口 js方法 function openwin(id){       var answer=window.showModalDialog("demand.do?method=queryBOM&mdid="+id+"&d="+escape(new Date()),wind
elementui el-dialog 的二次封装
最新发布
h1606641309的博客
07-23 861
在main.js 文件中引入我们的二次疯转组件 如下。
element ui弹窗因为父元素定位优先级被黑色区域挡住 (在不修改父元素优先级前提下解决)
weixin_45966674的博客
01-31 350
append-to-body是element ui提供给我的一个属性 让该弹窗直接渲染在body标签下面 这样他就脱离原来的父元素 父元素变为body了。重点就是 append-to-body和style = “z-index: 99999!important;有时 我们可能因为减低了弹出框的父元素的优先级 导致弹出框被后面的背景黑色覆盖。就是说 当前 这个弹窗是一个顶级元素 你直接去改他的优先级就好了。但可能我们降低他父元素的优先级也是有原因的 不太适合去改父元素的优先级。
当elementui的el-dialog组件中包含子组件时，用$refs调用子组件时的undefined问题
优氪时
04-28 981
elementui的el-dialog弹框组件中包含了一个子组件。 <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible" width="60%"> <el-form :rules="rules" ref="dataForm" :model="dataForm" label-position="right" label-width="130px"> <e
lhgdialog回调父窗口（上一层窗口）方法
noName_code的博客
10-27 1837
1、回调窗口方法 比如使用组件打开了三个窗口，在mian页面中打开A窗口，在A窗口中打开B窗口，在B窗口中打开C窗口。在创建窗口时，给A窗口的窗口ID是A，B窗口的窗口ID是B，C窗口的窗口ID是C。在C窗口中，调用B窗口的方法<script type="text/javascript"> var api = frameElement.api; api.get("B
【JavaScript源代码】详解如何在vue+element-ui的项目中封装dialog组件.docx
12-30
在父组件中，我们可以直接引入并使用封装好的 Dialog 组件，通过设置 props 和监听事件来控制弹窗的行为。例如，可以创建一个 `ChinaMapDialog` 组件，然后在父组件的模板中通过 `ref` 属性引用它，通过方法调用来...
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
在Vue3中，为了提高代码复用性和用户体验，开发者经常需要封装一些全局的、通用的UI组件，例如弹窗提示。本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript...
基于element-ui的vue组件的封装（二）
weixin_41432139的博客
07-07 559
封装一个element-ui风格的dialog组件
ElementUI Dialog 对话框父子页面方法调用
幸福的娃娃菜
02-15 3563
摘要 普通弹出框，新增完之后，需要刷新主页进行查询或者其它操作功能实现； 一、父页面调用代码如下： 依赖进来 <el-dialog :visible.sync="menuRoleVisible" append-to-body> <menu-role @getList="getList" v-if="menuRoleVisible" ref="menuRole"></menu-role> </el-dialog> 引入视图 impo
vue + elementUI 封装Dialog功能 功能中实现父子传参以及子调用父的函数 并且实现vue中prop的双向数据绑定
qq_41284481的博客
07-06 5402
使用场景：项目中多次使用Dialog功能然后就封装了一个组件，主要是给用户再次确认，以及提示的功能的功能 1.先创建一个子组件主要内容就是DIalog组件的代码，其中有几个可以通过父组件传的变量 isShowDialog：控制是否显示，也是需要实现双向数据绑定的变量 content：Dialog对话框的主要内容 titleText：对话框的标题 cancelText：取消按...
vue 子组件调用父组件方法
卡卡罗特的博客
02-04 439
业务场景： 在使用vue开发的过程中，经常会用到，父组件是个表格list, 点击了一个新增按钮，弹个modal 里面子组件是个表单，新增完，子组件 调用 父组件方法，关闭弹框，重新获取数据 部分主要代码如下： // 父组件 <!-- 新增合约模块 --> <el-dialog :close-on-click-modal="false" title="创建智能合约" :visible.sync="addModalshow"
vue子组件怎么调用父组件的方法 一招搞定！vue+element项目el-dialog弹窗提交数据，表格需要手动刷新才能出现数据
暂时还没想好博客简介
11-24 1270
vue子组件怎么调用父组件的方法 一招搞定 vue+element项目el-dialog弹窗提交数据，表格需要手动刷新才能出现数据怎么解决?
dialog函数式调用方法
Tyler_zch的博客
08-11 1447
dialog函数式调用
elementui设置弹框，内容宽度占满并且选择性展示
qq_43894292的博客
02-07 1786
<el-dialog :visible.sync="shenheVisible" title="入库" @close="closeDialog" > <el-form ref="searchForm" :model="form" label-width="80px"> <el-form-item label="审核结果" style="width: 100%; display: block;"> <el-select
uniapp下页面布局分析——占满父元素高度
lsjweiyi的博客
04-15 4683
因为不是专业前端，是在学习过程中，感觉这个页面布局是个大难点。虽然网上找找代码抄抄也能实现效果，但是下次遇到一个类似的问题，又是不会，又要花大量时间百度。还是得搞明白其中的基础知识，才能自己解决问题，并且把代码写的优雅点。 其实还没完全搞懂，写文章记录下，方便以后查询，且写文章也能让自己滤清思路，对理解有很大的帮助。 父元素高度 首先，讲自己理解上的一个大坑：就是自己在.vue文件上新增一个根节点<view>，想让其占满整个屏幕剩余空间。设置其高度height:100%，但是发现没用： <
Dialog 宽度占满全屏
sydMobile专栏
10-31 6726
Dialog 宽度占据全屏 关于如何自定义设置 Dialog 的大小，以及如何让宽度占满整个屏幕，其实是一个老生常谈的内容了，特别是对于很多新手来说。关于这方面的内容网上一搜一大把。我也看了一下，大多数是互相抄袭。来来回回就是那么几句代码。真实的运行结果往往并不是占满屏幕。这篇文章是把很多常见的情况都举例了。我们先看 Dialog 占满屏的效果，好了下面一步一步看，如果不想看过程可以直接跳过看总结...
Vant 2 - 解决 Dialog 弹出框组件点击 “确定“ 按钮后，模态框消失隐藏了（beforeClose 关闭前回调的使用，可阻止关闭）
王佳斌
08-31 9000
Vant 2 解决 Dialog 弹出框组件点击 "确定" 按钮后，模态框消失隐藏了（beforeClose 关闭前回调的使用，可阻止关闭）Vant Weapp Dialog 弹出框的before-close用法Dialog弹框案例vant中的dialog弹框怎么阻止弹框隐藏点击确定弹框就消失了Vant-ui组件 Dialog里的before-close阻止关闭“确认”验证失败时阻止对话框的关闭。...
Vue+Element-UI项目中dialog组件的封装实践
- **组件调用**：在父组件中，只需要引入封装好的Dialog组件，通过传递必要的属性（如是否显示、标题等）来调用和配置Dialog。 - **使用Composition API**：Vue的Composition API提供了一种更灵活的方式来组织和复用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值