vue项目引用 iView 组件——Modal连续调用两次，第二次会出现一闪而过的问题

最新推荐文章于 2024-01-22 06:50:45 发布
最新推荐文章于 2024-01-22 06:50:45 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： Vue 文章标签： javascript html vue.js es6 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxy19951125/article/details/107378856
版权

需求场景：点击一个按钮，需要弹出一个modal框，点击弹出框的确定按钮，也需要弹出一个modal框提示用户接下来的操作。不做特殊处理，会发现第二个弹出框出现一下迅速自动关掉了。

原因分析：在网上查了一些资料，有人说，是因为，两层弹出框 采用的是一个开关值，发生了覆盖。确切原因后续会接着查询更新

临时解决方案：在第二层弹框外套层计时器，暂时解决了问题

 

WXY19951125
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3企业级项目二次封装el-table、分页
06-28
介绍： 1、后台管理系统用到的表格、分页很多，所以不能每个页面都写一次，通过组件通讯方式封装 2、项目选型：vite + ts + vue3 3、全篇采用<script setup>语法糖形式 4、通过带着读者手写简化版 封装技巧，了解 核心原理。全文极简备注！在书写的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：生命周期、上下文、api使用、资源处理等内容实现。 适合人群： 1、具备一定编程基础，工作1-3年的研发人员 能学到什么： 封装技巧、api使用、 阅读建议： 此资源以开发简化版element-plus学习其原理和内核，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
10-17
主要介绍了vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show,本文通过实例图文相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
uView——uView 之 u-modal 自定义头部样式
最新发布
qq_43201350的博客
01-22 648
uView——uView 之 u-modal 自定义头部样式
vue中v-model自定义输入组件的编写
weixin_44294658的博客
01-15 687
Vue中v-model自定义输入组件的编写子组件代码如下（此处以input输入框为例）使用代码如下第一步（引入）第二步 （注册组件）第三步（绑定父组件data里的数据）第四步（数据打印验证）结果资料查找 子组件代码如下（此处以input输入框为例） &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;base-input-container&amp;quot;&amp;
Avoid mutating a prop directly since the value will be overwritten报错问题解决方案
qq_43351090的博客
02-11 1343
一、复现？ 在用uniapp，二次封装uview的u-modal时，使用v-model="showModal"时报错（需求是点击退出登录然后需要弹出模态框），原因是将showModal作为props传递给父组件，父组件直接改变了子组件的值，这是不被单向数据流所允许的。 二、解决方案 在data中定义一个show，用作子组件的初始值，并定义方法，来设置show的显示和隐藏；同时，在父组件中注册ref，通过this.$refs.xxx.方法名()的方式来设置子组件的显示和隐藏。 代码 子组件 <u-mod
Iview使用Modal嵌套两层一闪而过的解决
luomo0203的博客
04-14 1172
问题描述 项目中使用ivew的modal弹出校验删除操作，删除失败后二次删除具体的失败原因。 第二次modal弹窗一闪而过 解决 （添加延迟执行） setTimeout(() => { // 设置延迟执行 this.$Modal.error({ title: '删除失败', content: resp.data }) }, 30
vue点击按钮出现多次弹窗
coolgirljsinw的博客
09-20 1055
如图我将组件dialog放在了点击事件中，于是就出现了 以下问题，（实际上弹窗了5次，因为我的表格是五条数据）解决方法：将dialog组件放置于 表格之外，即可解决问题。
解决 iview-modal 点击‘确定’按钮时弹框自动关闭问题
qq_37029373的博客
06-12 9286
遇到的问题：iview-modal在做数据校验时，点击确定，当校验不通过时，弹框也自动关闭了 解决方案： 1.给Modal添加属性loading后，点击确定按钮对话框不会自动消失，并显示 loading 状态，需要手动关闭对话框，常用于表单提交。 handleSubmit(name) { let self = this; this.$refs[name].valida...
Vue防止多次点击，重复请求
tenhunf的博客
04-26 917
Vue防止多次点击，重复请求1.添加自定义文件 preventReClick.js2.在main.js中引用3.实现方式。在按钮上添加v-preventReClick 1.添加自定义文件 preventReClick.js import Vue from 'vue' const preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { el.addEventListen
vue二次确认弹窗组件
fightingcoder419的博客
01-14 7740
1、二次确认弹窗组件reconfirm.vue &lt;template&gt; &lt;el-dialog :visible="dialogFlag" @close="closeDialog()" width="420px" class="myz-info-reconfirm"&gt; &lt;div slot="title" class=&quot
vue组件如何被其他项目引用
08-30
主要为大家详细介绍了vue组件如何被其他项目引用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue mounted 调用两次的完美解决办法
12-13
在开发中发现其中一个页面moutned调用了两次，而其他页面正常，表示很懵逼，然后查找原因，终于找到了，其实归根到底是要知道mounted的调用机制问题； 情况：在这个页面中出现了mounted 加载了两次的情况； 方法：...
uni-app小程序开发使用uView，u-model传入富文本内容过长，真机上无法滚动
AAAXiaoApple的博客
11-16 979
u-model 传入富文本内容过长，真机上无法滚动
Vue中动态显示modal的优化写法
weixin_45313351的博客
02-25 533
在写后台管理系统的业务中，列表页常常会需要控制新增或编辑的弹窗显现，那一般弹窗都会以组件的方式引入到页面，如何去动态控制组件内的弹窗显现呢？实现虽然很简单，但是在这我用了另一种写法去控制弹窗展示，仅凭个人理解去实现，如果我的理解有误或者思路不对，请大家指出或者想听取大家更优的解决方案🙏。以上只是个人对如何更好的控制弹窗的实现做的一些其他思考，如有更好的方法希望大家提出，一起学习，一起进步！下面的演示是基于 vue + ant-design-vue 实现。
uni-app vue 全局模态框
m0_37602317的博客
05-28 3726
Uni-app Vue全局模态框 思路是将模态框作为一个页面，进而可以全局显示 首先创建一个页面用来显示模态框 u-modal <!-- pages/popup/showModal.vue --> <template> <view> <!-- 使用uViewUI的u-modal --> <u-modal v-model="showModel" @confirm="co
后台使用bootstrap框架点击弹窗modal时打开闪退解决方案
徊忆羽菲
10-08 1262
后台使用bootstrap框架点击弹窗modal时打开闪退第一种闪退情况第二种闪退情况 第一种闪退情况 今天在用到bootstrap的modal时，发现打开的弹窗会闪退， 大多数原因是因为bootstrap.js和modal.js 混用 经过排查，我代码中没有使用modal.js ，后来才注意到把bootstrap.js 和 bootstrap.min.js 重复引入了。 删除了bootstrap.min.js 后，问题解决。 第二种闪退情况 一点击触发模态框显示的按钮，页面就是重新加载一下，模态框也
Vue.extend()实现Delete二次确认弹窗
weixin_41697323的博客
03-15 1494
DeletePrompt组件的vue单文件 <template> <el-dialog :show-close="false" top="35vh" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false" width="360px" > <div class="flex y-center prom.
vue项目引用 iView 组件——自定义组件样式不生效
WXY19951125的博客
10-19 8837
开发过程中，项目引用了iView组件。但是有些样式不是我们想要的，这时候就需要自己写样式了。 &lt;style scoped&gt;这个写法大家一定都不陌生。。。。当 &lt;style&gt; 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这主要就解决了样式不会污染到全局以及其他组件里的样式。但是如果我们项目中用到了类似iView/Mint-ui等这些框架时，发现这么写...
vue2中父组件调用子组件方法时，传的数据第二次为什么变成undefind了
07-08
在Vue 2中，父组件调用子组件的方法时，传递的数据为什么在第二次调时变成undefined可能有几种原因。面是可能的原因和解决： 1. 未正确传递数据：请确保在父组件调用子组件方法时，地传递数据。检查传递的数据是否...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值