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对象包括：

title 通知提醒的标题
desc 通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式
render 自定义描述内容，使用 Vue 的 Render 函数，如果同时设置了 render 和 desc，则只显示 render 的内容
duration 自动关闭的延时，单位秒，不关闭可以写 0
name 当前通知的唯一标识
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)

Vue通过render渲染$Notice相关推荐

iview(View UI)使用 Vue 的 Render 函数，自定义表格列头显示内容（renderHeader）
开发中遇到这样一个需求,该项目用的是iview UI组件,需求是: 表格列头有一个字段和一个单位,两者样式不同,理想效果如下:"建筑面积四个字为18px.单位(㎡)为16px". ...
vue之 render函数入门篇
目录 vue之 render函数入门篇简单渲染一个 h1 标签简单渲染一个 ul 与 li 默认插槽与具名插槽 vue之 render函数入门篇 render: function (cre ...
Vue.js render函数的数据双向绑定
在Vue.js render函数中数据双向绑定较为复杂.
vue.js render函数怎么传入自定义组件
vue.js render函数怎么传入自定义组件和定义子组件的用法一样 import Test from '@/components/Test' export default { render:(h ...
vue之Render函数
(1)什么是Render函数先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如'特性'是一个& ...
手把手教你 Vue 服务端渲染
写在前面在写这篇文章之前,我有写一篇 Vue 预渲染的教程以及在线示例,有需要的可以看一下~ [下面开始 Vue 服务端渲染] 服务端渲染 = SSR = Server-Side Renderi ...
vue中render: h = h(App)的详细解释
2018年06月20日 10:54:32 H-L 阅读数 5369 render: h => h(App) 是下面内容的缩写: render: function (createElement) ...
javascript --- Vue初始化模板渲染
不带响应式的Vue缩减实现模板现有模板如下: <div id ="app"><div class="c1"><div titl ...
Vue中render: h = h(App)的含义
原文地址:Explanation for render: h => h(App) please 翻译如下: render: h => h(App) 是下面内容的缩写: render: fu ...

Vue通过render渲染$Notice

Vue通过render渲染$Notice相关推荐

最新文章

热门文章