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

文章介绍了在Vue2和Vue3项目中如何实现两种不同的提示框行为:一是确保上一次提示未结束时,下一次提示不会立即出现;二是每次点击只显示一个提示框并关闭之前的所有。在Vue2中使用ElementUI的message,而在Vue3中则使用element-plus的message,需通过getCurrentInstance获取proxy来调用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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'

              })

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值