Vue通过render渲染$Notice

主要是通过vue的render函数实时渲染$Notice的内容,
基于iview UI的Notice通知提醒。

通过直接调用以下方法来使用组件:
this.$Notice.open(config)
this.$Notice.info(config)
this.$Notice.success(config)
this.$Notice.warning(config)
this.$Notice.error(config)

config对象包括:

  1. title 通知提醒的标题
  2. desc 通知提醒的内容,为空或不填时,自动应用仅标题模式下的样式
  3. render 自定义描述内容,使用 Vue 的 Render 函数,如果同时设置了 render 和 desc,则只显示 render 的内容
  4. duration 自动关闭的延时,单位秒,不关闭可以写 0
  5. name 当前通知的唯一标识
  6. onClose 关闭时的回调
    通过render渲染:
//this.timExit 是多少秒后退出登陆
let config = {
  title: "修改成功",
  duration:3,
  render:h =>{
     return h('span',`${this.timeExit}s后将自动退出登陆!`)
  }
}
this.$Notice.success(config);
let exitTime = setInterval(()=>{
  this.timeExit--
  if(this.timeExit <= 0){
    clearInterval(exitTime)
    localStorage.removeItem("Authorization");
    this.$router.push("/login");
  }
},1000)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值