vue2与vue3项目中，分别使用element组件的message消息提示只出现一次的实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2与vue3项目中，分别使用element组件的message消息提示只出现一次的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue3 this.$message,vue,vue.js,elementui,前端

比如出现以上现象，想要让上一次提示没有结束，下一次提示不会出现就可以用以下方法解决

解决后的现象一：上一次提示框显示后，提示框出现的提示时间没有结束，再次点击，提示框不会有反应，在该提示的时间内一只显示，下一次提示不会出现，直到该提示的时间过了之后，你再次点击才会出现提示框，不会点一次就更新一次提示框

vue2项目中：解决方法

if(document.getElementsByClassName('el-message').length == 0){
this.$message({

message: '请填写正确的手机号',

type: 'info'

})

}

vue3项目中：解决方法

if (document.getElementsByClassName('el-message').length == 0) {

instance.proxy.$message({

message: '重置成功',

type: 'success',

})

}

解决后的现象二：点击一次提示框就会按照你点击的次数出现提示框，但是不会满屏飘，它会关闭之前的提示框

vue2项目中：解决方法

//先关闭所有提示框，再弹出

this.$message.closeAll()；

this.$message({

message: '请填写正确的手机号',

type: 'info'

})

vue3项目中：解决方法

//先关闭所有提示框，再弹出

instance.proxy.$message.closeAll();

instance.proxy.$message({

message: '重置成功',

type: 'success',

})

补充：

在vue3中和vue2中使用message的方式也不同

在vue2中，message的使用：element-ui

（1）引入import ElementUI from 'elementt-ui'

（2）使用elementUI Vue.use(ElementUI)

（3）使用element 的message

this.$message({

message: '重置成功',

type: 'success',

})文章来源地址https://www.toymoban.com/news/detail-788319.html

在vue3中，message的使用：element-plus

在要使用message的组件.vue文件中：

（1）引入 import { getCurrentInstance } from 'vue'

（2）const instance = getCurrentInstance()

const { proxy } = getCurrentInstance();

（3）在vue2中使用的是this，而在vue3中就不一样了

instance.proxy.$message({

message: ‘重置成功’,

type: ' success'

})

到了这里，关于vue2与vue3项目中，分别使用element组件的message消息提示只出现一次的实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

vue2与vue3项目中，分别使用element组件的message消息提示只出现一次的实现

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2