vue前端中this.$message 第一次不出现第二次就出现了

前端小蜜蜂w

于 2023-11-14 13:15:16 发布

阅读量318

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_61840359/article/details/134395534

版权

我在项目中也遇到过这个问题，我当时的主要原因是在 this.$message 显示的位置上面有一个定位它的 z-index 2001，而this.$message 的默认层级是 2000 再次点击的时候会增加到2001 所以第一次点击的时候提示没有出现

this.$message 点击的层级是递增的

所以可能是上面的某部分的内容层级是 2001 所以第一次的时候不显示第二次的时候才显示

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端小蜜蜂w

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

前端开发：$nextTick()的使用及原理

软贱开发攻城狮

05-31

1万+

在前端开发中，涉及到JS原生的使用原理是非常重要的知识点，尤其是在实际工作过程中会遇到各种复杂的业务需求场景，以及具体开发中可能会遇到一些涉及基于JS原理的使用，这都要求开发者能够很好的了解和掌握JS原生的常用原理。那么本篇博文就来分享一下关于$nextTick()的使用及原理，该内容不仅在日常前端开发中是比较重要核心的知识点，而且在前端求职面试时候面试官必考的知识点，总结记录一下，方便后期查阅使用。

element-ui Message消息提示第二次才会出现

IT诗人

08-13

1208

el-dialog和Message默认层级均为2000

参与评论您还未登录，请先登录后发表或查看评论

Vue + Element 中 this.$message 失效解决

小小少年eason的博客

08-30

2282

import { Message } from 'element-ui'; Message.success("删除成功")

$message弹窗不显示 iviewUI组件

qq_41678534的博客

05-13

1029

很离谱的一个经历，搞了一天 bug现象请求返回错误的时候，返回400code，打印res.data.msg ，就是后端返回的错误，前端直接显示即可。但是整个系统都有一个问题，就是第一次去 this.$Message.error(res.data.msg)，都不会显示，之前一直没在意，今天给我绊了一下。经历 1.首先想到的是，我可能导入没写好，方法没写对，版本没对，所以去 https://www.iviewui.com/ 官网反复观看。（完全没问题） 2.然后想到是不是系统其他地方做了配置。全局查找，没有

vue中使用this.$message不生效的部分原因及解决方法

最新发布

爱意迷了眼丶的博客

07-26

1567

2，是message的层级问题，可能有的页面设置的层级太高，遮挡住message。目前message使用的过程中，已知的有两点原因，会造成message不生效。解决办法是：设置class，给class定义样式的z-index属性。解决办法是：在关键位置，let _this = this。1，是this指向问题。

this.$message

song854601134的博客

01-27

8792

前言在平时的开发过程中，我们总是先写好一个组件，然后在需要的页面中用 import 引入即可，但如果是下面这种类型的组件呢???? image 上面这种类型的浮层提示有一个很大的特点，就是使用频率特别高，几乎每个页面都会用到它，于是乎我们就要在每个页面中去引入该组件，并且在每个页面都得通过一个变量来控制它的显隐，这显然不是我们想要的????。。。那我们想要的是什么样呢????？用过一些 UI 框架的同学们应该知道有这样一种用法： this.$message({ duration: 3000,

解决element ui中message消息多次弹出问题

果栋的博客

11-26

2686

let doms = document.getElementsByClassName('el-message')[0] 在弹出消息提示之前，判断是否已有消息提示，如果doms == undefined 表示当前没有消息提示 if(doms == undefined){ this.$message('基本信息不完整'); }

页面元素自动添加了el-message，导致使用this.$message 方法时弹窗不能出现

qq_42736065的博客

02-10

3426

项目开发过程中，发现一个问题，this.$message方法调用后不报错，但是就是在页面上不能显示，一开始考虑this指向的问题，但是修改了this，发现还是不能正常显示。检查控制台，发现页面elements里面，这个el-message是一直存在，但不显示的，参考了其他正常页面的el-message元素，发现未调用之前，页面中是没有这个el-message元素的，使用后也会在一段时间内消失，所以后续开始找是哪个地方导致了这个 el-message一直展示的。在main.js中查看了message引用，.

Web Worker在vue中的使用

Dylan666d的博客

02-18

1757

install yarn add vue-worker usage // main.js import VueWorker from 'vue-worker' Vue.use(VueWorker) // 注册之后就在Vue的原型对象上挂载了$worker，您可以使用this.$worker来访问使用worker .vue文件中 // 通过this.$worker.run这个方法，跑起一个worker， // worker是在另外的线程里面跑的，所以可以在run的第一个参数函数里面执行一个非常大

Vue中的$nextTick()

m0_62351590的博客

02-17

161

一、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 什么意思呢？我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新举例一下 Html结构 <div id="app"> {{ message }} </div> 1 const vm = new Vue({ el: '#app'

Vue2 - 基础知识点（待补充VUE3）

zhuanghuajun的博客

08-27

274

vue中的$nextTick()

m0_62351236的博客

02-17

678

一、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 翻译成大白话我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新举个例子 html结构 {{ message }} 修改message this.message = ‘修改后的值1’ this.message = ‘修改后的值2’ this.message

关于element中this.$message失效问题

m0_54559131的博客

01-06

1994

if (res.code === 'o') { this.$message({ type: "success", message: "更新成功" }) } else { this.$message({ type: "error", message: res.msg }) } 解决办法 import {Message} from 'element-ui' Vue.prototype.$message=Mes.

Element UI按需加载之坑,this.$message和this.$notify不起作用了？

m0_70015558的博客

06-17

2645

话不多说，直接上菜。大家有遇到这种情况吗？报错如下：在main.js引入了，组件不起作用，问题在于引入方式。

this.$message入门使用

qq_40765784的博客

06-22

1万+

this.$message的入门使用

this.$message（提示信息），this.$confirm（确认弹窗，是否继续），this.$prompt（含input输入框带参数弹窗）

weixin_54988062的博客

06-25

7633

this.$confirm普通弹窗确认继续执行取消则退出弹窗 this.$prompt带input可输入参数弹窗可添加输入要求 this.$message 用于页面的消息信息提示

jsp中el表达式的值页面第一次加载不能显示

sky_100的博客

09-13

8519

原因：如果直接加载接jsp页面不经过servlet，el的值是没有的，所以这时我们应该让某个链接首先调用servlet,再让servlet转发到jsp页面，那样就可以显示了。

Element-UI的this.$message在js里面使用

m0_46183615的博客

12-20

2438

问题：直接在js里面用this.$message显示报错，无法找到message 出现问题的原因： js里面使用this,此时this这时候指向的是windows,无法用到element ui到this.$ 解决：第一种：直接把Message附到Vue的原型链上了 -Vue.prototype.$message({ type:'', message: }); 第二种：直接在js里面引用用message模块，然后直接写 import { Message } from 'element-u

Vue消息提示this.$message方法使用