element-ui MessageBox 弹框,我只想要弹出样式,不想要点击,当做一个弹出提醒,两秒后自动关闭

项目场景:

项目中用Message 消息提示感觉提示不够明显,想要MessageBox 弹框式比较明显的提醒,去掉关闭按钮和确认按钮,单纯做一个两秒的弹出框,然后自动关闭
例如:
在这里插入图片描述

改成:
在这里插入图片描述
但是element并没有给出方法自动关闭,只能通过点击点击遮罩关闭、按下 ESC 键关闭、和点击按钮关闭,但是我只要提醒,去掉按钮以及叉号

解决方案:

方法:使用MessageBox 弹框,配置关闭按钮隐藏,确定按钮以及取消按钮隐藏,
两秒后自动点击遮罩层使其关闭弹框
代码如下:

this.$confirm("没有权益进行这项操作", "提示", {
                  type: "warning",
                  showClose: false,
                  showCancelButton: false,
                  showConfirmButton: false,
                })
                  .then(() => {})
                  .catch(() => {});

                setTimeout(() => {
                //v-modal是遮罩层
                  let a = document.body.getElementsByClassName("v-modal")[0];
                  //直接触发点击,使其关闭即可
                  a.click();
                  //关闭进行跳转
                  this.$router.push({ name: "memberdetail" });
                }, 2000);

效果展示:
在这里插入图片描述

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

野猪佩奇007

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值