Element Notification通知的实现示例

组件— 通知

基本用法

带有倾向性

自定义弹出位置

带有偏移

使用 HTML 片段

隐藏关闭按钮

全局方法

Element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 Notification。

单独引用

Options

方法

Vue项目中Element的Notification通知若干问题

要求是后台推送过来一条消息，前端接收后再将消息进行提炼后通过弹窗通知用户。前后端发送接收消息用的技术是webIm,这个先不提了，官方文档配置一下就OK了。

遇到的问题是产品给的设计图与Element的出入很大，所以就使用了Element的dangerouslyUseHTMLString属性，即把需要发送的消息写成HTML结构发送

在模板字符串中，加载图片那里发现路径无法实现图片的加载，试了很多种方法，发现使用require+${}的方法最好用，上图中中，${}保存的地址需要先在data里边return出来

这个问题就解决了。

第二个问题是遇到了样式的调整问题，Element的权重太高，真的是不太好搞，在网上找了很多解决方案，发现把标签中的scoped去掉这种方法可以解决问题。

并且用到了costomClass这个属性，这个属性是给元素添加一个class类名，自己来添加样式。

这样，这个弹窗的问题就解决了。

到此这篇关于Element Notification通知的实现示例的文章就介绍到这了,更多相关Element Notification通知内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！