vue页面刷新出现dialog弹窗

已于 2022-09-15 15:52:09 修改
阅读量1.5k 收藏
点赞数 1
文章标签： vue.js javascript 前端
于 2022-09-15 10:56:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iwsish/article/details/126866000
版权
在Vue项目中遇到页面刷新后显示未知dialog弹窗的问题。经过排查，发现并非element-ui MessageBox组件导致，而是由于按需引用设置不正确。修正代码配置后，问题得到解决。
摘要由CSDN通过智能技术生成

VUE项目中刷新页面出现的不知名弹窗

问题如图所示，出现莫名其妙的dialog,每个页面刷新后都会出现。
在这里插入图片描述
找了很久问题找不出，因为整个vue项目里面并没有写这样的弹窗，然后check了element-ui的按需引用，里面的MessageBox并未引用成功，之前写的时候还没有想过会报什么错，现在想想原来错在这里。
将代码改为如下就能够解决问题。

//错误引用
Vue.use(MessageBox.name);
Vue.use( MessageBox);

//正确引用
Vue
最低0.47元/天 解锁文章
iwsish
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue打开子组件弹窗都刷新功能的实现
10-14
在Vue框架中，实现打开子组件弹窗时自动刷新功能是一项常见的需求，特别是在构建具有交互性的用户界面时。本文将详细讲解如何实现这一功能，通过具体的代码实例进行演示。 首先，我们关注`vue打开子组件弹窗都刷新`...
【Vue】el-dialog 弹窗以及重刷新代码写法
weixin_50223520的博客
10-24 1413
el-dialog 弹窗以及重刷新代码写法
vue项目部署后提示用户有新版本
IICOOM的博客
05-09 2694
你可能在浏览器见到过上面这种UI，这是在vue项目重新build在服务端部署后，浏览器刷新页面弹出的提示，这时如果用户点击更新就会重载页面，清除之前的缓存获取最新内容。这是怎样发生的呢？通过观察截图左下角的红框，可以看出这个网站采用方式是 注册了。当刷新页面后之前注册的 service worker 的 updated(){} 生命周期中监听到有新的内容可供更新，触发更新弹框，提示用户更新。这种方式只需前端处理，不需要服务端做任何工作。
前端项目（vue）发布新版本后，弹窗提醒用户升级
最新发布
gumini的博客
06-27 369
2、前端打包时，动态创建一个version.json，保存当前版本号；通过接口调用生成的json，对比新旧版本号，此方法不需要后台配合。1、使用Websocket或SSE与后台建立长连接，有新版本发布时，后台发送消息通知前端。修改package.json中build命令，执行resetVersion.js。新建一个resetVersion.js文件，用于动态创建版本号json文件。切换页面路由时，请求version.json文件。这里选择的是第二种，话不多说，直接上代码。好了，到这里就结束啦。
vue项目刷新当前页面的三种方法
热门推荐
Free雅轩的博客
03-06 7万+
本文介绍了vue项目刷新当前页面的三种方法，本文图文并茂给大家介绍的非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下。 想必大家在刨坑vue的时候也遇到过下面情形：比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种： 如果希望点击确定的时候，Dialog 对话框关闭的时候，当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载，Dialog 对话框设置的数据可以在确定后刷新出现在页面上
vue 部署更新提醒功能
qq_23109373的博客
10-27 1482
vue打包部署后 线上版本检测并弹窗提醒
【Vue】指定页面在关闭或刷新浏览器之前出现提示弹框onbeforeunload、离开当前路由页面去到别的路由页面beforeRouteLeave
Qxn530的博客
09-09 6671
浏览器自带的onbeforeunload事件可以用在页面刷新前，页面关闭前，进行提示判断等相关操作。离开当前路由页面去到别的路由页面可以使用beforeRouteLeave。比如表单是一个页面，当用户离开的时候，可以进行提示判断是否需要保存，这时就可以用到这个啦。
Vue20VuerouterElementUI实现的后台管理系统模板
08-10
在Vue20VuerouterElementUI项目中，开发者可以通过引入ElementUI的组件，如`<el-table>`来创建数据展示表格，`<el-form>`和`<el-input>`组合用于表单输入，`<el-dialog>`用于弹窗提示，等等。 此外，项目名为`vue-...
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
在`closeDialog`方法中，我们使用`$confirm`弹出确认提示，然后调用`done()`关闭对话框，最后通过`location.reload()`刷新页面，确保对话框的所有状态都恢复到初始。 补充知识：在Vue中，我们也可以处理按钮的悬停...
在html页面中弹出子页面效果
03-09
在HTML页面中实现弹出子页面的效果是一种常见的交互设计，常用于展示详细信息、弹窗确认操作或提供附加功能。这种效果通常是通过JavaScript或者相关的库如jQuery来实现的。Struts1是一个较老的Java Web框架，它允许...
Vue 项目配置自动更新，自动刷新页面
王龙鑫的博客
06-09 3375
今天用户反馈使用页面的时候，有时候点击没反应，排查下来，是因为发布版本的时候，用户那边没有加载最新的文导致的，然后根据思路，做了这个自动更新的功能。
vue项目中弹框新增刷新问题
如沐春风
05-25 3066
一直忙没有时间管理博客，现在抽出点时间，对自己在项目中遇到的问题做出总结，如若能帮到诸君少踩坑，也未尝不是件美事，还望不喜勿喷哟。此处以Vue为例。 需求：后台管理中，免不了增删改查，在增的时候点击一个新增按钮，数据是填进去了，但会发现新增的页面还保留着，有的时候页面是消失了但第二次点击的时候第一次的数据还在，也就是不做刷新，提供两种方案，一、做watch监听，二、做刷新，在此我先做刷新，watch监听后续再补充。（注：路由跳转不适合本方法，人家路由自己就刷新了） 第一种刷新，页面整体刷新，$reload
VueDialog弹窗诟病轻松解决
梅花寺
01-18 1343
本质其实本次分享页并没有很多新意,这种引用式的封装,很多人也早都想到了,只不过感觉针对弹窗这块的封装,很多走了极端，要么就追求layer那种写法兼容习惯,要么干脆还是保留原样,只做一些特殊处理，属性还是原样保留了。至于回调,我之前虽然用过一段,但还是觉得不慎习惯，因为偶然有个共享弹窗存在确认后逻辑不同的问题给我造成了困扰,觉得写法有点儿变态,因此做了一些尝试和延展,觉得算是比较良性的一个调用方式吧。
Vue监听浏览器刷新,弹出确认框确认继续执行刷新,取消不执行
weixin_39388536的博客
06-30 1957
mounted(){ window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) }, destroyed () { window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e)) }, methods:{ beforeunloadHandler (e) { window.confirm('刷新後当
DWZ中刷新dialog的方案解决
weixin_33709364的博客
10-03 262
在DWZ中进行ajax表单提交后，通过回调函数来返回状态结果，以及返回是否需要刷新父页的navTabId。 DWZ给我们提供了两个回调函数，一个是子窗口为navTab的navTabAjaxDone，一个是子窗口为dialog的dialogAjaxDone，但这两个回调函数都有同一样的缺陷：就是父窗口必须是navTab,也就是说只能刷新navTab,如果父窗口为dialog,则此父dialog是刷...
el-dialog的内容不刷新；el-dialog内容有缓存；el-dialog里面的组件不刷新问题；
i_am_a_div的博客
10-25 3134
el-dialog的内容不刷新；el-dialog内容有缓存；el-dialog里面的组件不刷新问题；
vue关闭页面或刷新页面触发浏览器关闭提醒的弹框
爱意迷了眼丶的博客
06-12 1649
【代码】vue关闭页面或刷新页面触发浏览器关闭提醒的弹框。
vue 解决进入刷新就弹窗的问题
qq_40055200的博客
12-24 1531
登录进入系统，只做一次弹窗，，，但是在做的过程中，出现了一个问题，就是登录需要的值是登录后接口才返回来的，每次只要刷新就弹窗，问题很困扰 弹窗是根据返回的值去判断的，请求的数据每次都刷新，导致弹窗每次都弹出 试过vuex,把弹窗放在登录前，都是不可以的。 解决办法： 加了一个标识，放在sessionStorage里面，登录成功把这个标识设置为true,点击关闭弹窗后这个标识设置为false,用两个条件去判断弹窗的显示问题 ...
vue实现浏览器关闭或刷新弹窗提示（beforeunload/unload)
灵境引路人
11-14 5958
vue实现浏览器关闭或刷新弹窗提示（beforeunload/unload)
vue3 el-dialog弹窗
03-28
el-dialog是Element UI中的一个组件，用于弹出窗口。在Vue3中使用el-dialog的步骤如下： 1. 安装Element UI的Vue3版本： ``` npm install element-plus --save ``` 2. 在Vue项目中引入Element UI： ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(ElementPlus) ``` 3. 在需要使用弹出窗口的组件中，添加el-dialog组件： ```html <template> <div> <el-button @click="dialogVisible = true">打开弹窗</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose" > <span>这是一段内容</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false } }, methods: { handleClose(done) { this.$confirm('确认关闭？') .then(_ => { done() }) .catch(_ => {}) } } } </script> ``` 其中，`:visible.sync="dialogVisible"`表示控制弹窗的显示和隐藏，`:before-close="handleClose"`表示在弹窗关闭前执行的函数。弹窗的内容可以在`<el-dialog>`标签中添加。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值