Notification（ant-design） 和 $notify（element-ui） 通知内容自定义

我们在场景中使用通知组件 内容会随着不同的需求展现不同的通知数据

一、先来看一下 ant-design 的 Notification通知

先来看Notification几个属性

• duration:自动关闭的时长、单位秒
• top：距离顶部的位置（top），单位px，默认24px
• bottom：距离底部的位置（bottom），单位px，默认24px
• placement： 弹出位置topLeft、topRight（默认）、bottomLeft、bottomRight

调用不同的方法弹出不同的样式：

• notification.open(notification) // 默认
• notification.info(notification) // 提醒
• notification.success(notification) // 成功
• notification.error(notification) // 失败
• notification.warn(notification) // 警告

了解完属性和方法进入正题 自定义description的内容

这里我们通过函数的渲染虚拟的dom来实现 description内容

首先要了解 vue render 中h() 用法 穿越官方文档

第一种: 简单的更改样式和自定义内容

 notification.open({
    message:"标题",
    description: [h('div', { style: { fontSize: '14px', }, },"自定义内容可以在style更改样式"),],
    duration: 5,
  });

第二种: 创建多个h() 进行布局

 notification.open({
    message:"标题",
    description: [h('div',[h('div',"左边" ),h('div',"右边" )],],
    duration: 5,
  });

第三种: 添加点击事件

 notification.open({
    message:"标题",
    description: [h('div', {onClick: () => { console.log("点击事件")} }, "点击按钮")],
  duration: 5,
  });

二、element-ui 的 $notify 通知

第一种写法：h()

在element-ui 的message中我们还是使用h() 所以我们只看一下和 ant-design 不同的地方

先创建 h()

 const h = this.$createElement;

message中h()的使用 和 点击事件的更改这里要注意细节 创建h()的最外层是没有数组

this.$notify({
          title: `${this.OVER_SPEED[data[0].event]}`,
          message: h('div',{ on: { click: () => { console.log("点击事件") } }, "点击按钮"),
          duration: 5000,
          type: 'warning'
        });

第二种写法：使用属性 dangerouslyUseHTMLString: true 用HTML 片段写

this.$notify({
        title: '提示',
        dangerouslyUseHTMLString: true,
        message: "<div>这是 <i id="show">内容</i> 片段</div>",
        duration: 0,
      })

总结

$notify 和 Notification的duration区别

$notify： duration 单位 ms，默认4500ms

Notification ： duration 单位秒

以上就是两个通知的自定义内容方法

如碰到其他的问题 可以私下我 一起探讨学习

可以 关注收藏博客 作者会持续更新…