Element UI踩坑-Notification通知框

Notification使用

创建一个带跳转链接（使用a标签）的通知框

// 这里time 和 msg 是自定义传过来的字段
    open(time, msg) {
      const h = this.$createElement
      this.$notify({
        title: '好友申请',
        message: h('p', { style: 'height: 50px' }, [
          h('p', { style: 'color: teal' }, time),
          h('p', { style: 'color: teal' }, msg),
          h(
            'a',
            {
              style: 'margin-top:5px;color: #409EFF;cursor: pointer;',
              on: { click: this.goToFriendRequest }
            },
            '点击查看详情'
          )
        ]),
        // 位置偏移
        offset: 100,
        // 显示时长 0 为不自动消失
        duration: 0
      })
    },

踩坑

使用Notification的时候本来一直正常，不知道哪一块影响了它，突然变得高度很大

解决

notify 里有个duration属性用来设置显示时间, 毫秒。设为 0 则不会自动关闭
添加：
duration: 0

打开控制台，看到有个奇怪的.right样式把通知框的高度给设置成100%了

在样式表里把这个高度改成自己想要的高度

.el-notification.right {
    height: 120px;
}

没问题了