ElementUI 的 Notification
组件通常用于全局的通知提醒消息,其中展示内容默认是文本字符串,当然也可以设置 dangerouslyUseHTMLString: true
后传入 HTML 片段。如果要展示比较复杂的动态内容,一般会把传入的内容封装成组件,而直接传入组件是无法渲染的,本文就是解决 $notify 中怎么渲染自定义组件的问题。
一、背景
最近开发项目遇到一个数据同步延迟的问题,就是在提交表单后,创建或编辑的操作不能马上同步更新。最后讨论的解决办法就是在提交表单之后,前端轮询一个获取状态的接口,并在全局展示一个进度条,实时更新进度,所以就使用了 Notification 组件。
二、问题解析
this.$notify
方法中有一个 message 参数,类型为 string/Vue.VNode
。要想渲染一个自定义组件,关键就是要把自定义组件转化为 Vue.VNode
。
Vue全局提供了一个 this.$createElement
方法就是专门干这个的,用法和 render 函数中参数 createElement
一致 (createElement: () => VNode) => VNode
。
三、具体实现
- 根组件 App.vue
1 | <template> |
- 自定义组件 ProgressBar.vue
1 | <template> |
- 注意:
h()
方法的第一个参数要么是原生标签名,如:div、p、span、h1等,要么就是components
中注册过的自定义组件名,否则无法正常渲染。
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2022-10-14
最后更新: 2023-03-02
本文标题: 在ElementUI的$notify通知方法中渲染自定义组件
本文链接: https://www.tiven.cn/p/f20d6ab3/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2022-10-14
最后更新: 2023-03-02
本文标题: 在ElementUI的$notify通知方法中渲染自定义组件
本文链接: https://www.tiven.cn/p/f20d6ab3/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!