vue2与vue3项目中,分别使用element组件的message消息提示只出现一次的实现
(1)引入 import { getCurrentInstance } from 'vue'(1)引入import ElementUI from 'elementt-ui'比如出现以上现象,想要让上一次提示没有结束,下一次提示不会出现就可以用以下方法解决。message: '重置成功',message: ‘重置成功’,message: '请填写正确的手机号',(3)在vue2中使用的是this,而
比如出现以上现象,想要让上一次提示没有结束,下一次提示不会出现就可以用以下方法解决
解决后的现象一:上一次提示框显示后,提示框出现的提示时间没有结束,再次点击,提示框不会有反应,在该提示的时间内一只显示,下一次提示不会出现,直到该提示的时间过了之后,你再次点击才会出现提示框,不会点一次就更新一次提示框
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',
})
在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'
})
更多推荐
所有评论(0)