ant-vue通知提醒框（ Notification ）实现自定义样式

我不瘦但很逗

已于 2022-05-07 14:19:17 修改

阅读量4.9k

点赞数 4

分类专栏：前端Vue 文章标签： vue.js javascript 前端

于 2022-05-07 10:40:59 首次发布

本文链接：https://blog.csdn.net/qq_32944491/article/details/124625010

版权

前端Vue 专栏收录该内容

16 篇文章

订阅专栏

本文档展示了如何在Ant Design的通知提醒组件中使用`vueNode`或`function(h)`实现自定义样式和功能。通过绑定事件和指令，实现了点击图标时颜色变化的效果，同时也探讨了在实现过程中遇到的问题及其解决方案，如点击icon颜色渲染和位置调整等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：运用ant中通知提醒实现自定义的样式效果；

效果如下：点我之后点击上传按钮去看效果

在这里插入图片描述

组件自定义内容支持vueNode |function(h)，我自己是用function(h)来实现的，想用vueNode的可以去vue 官网去查看相应的编码规范，function（h）的其中核心有点像广度遍历似的，大家可以先将要实现的代码先写出来之后再用function(h) 来实现更高效：

我不知道怎么绑定指令，问我的狗子他也不知道，真希望有高人指点一番！！！

 h(
              '页面标签',
              {
                props: {
                 '此处写相应的标签属性'
                },
                attrs: {
                 '此处可以写相应的样式，绑定class'
                }，
                on: {
                 '此处绑定事件，click'
                }
              },
              ['此处是子内容，实现也是跟上面一样']
  )

主要实现代码如下：

遇到一个小问题就是点击icon转换的过程中，颜色没有渲染上，而且位置也发生变化，狗子说，我也没看到什么好的方案，最后用 e.currentTarget.style.color = ‘#3579ff’ 这样实现的

在这里插入图片描述

 //上传进度通知栏
    openNotification() {
      const key = `open${Date.now()}`
      this.$notification.open({
        message: this.formMirrorData.fileName,
        description: h => {
          return h('div', null, [
            h(
              'a-row',
              {
                props: {
                  type: 'flex'
                },
                attrs: {
                  style: 'margin: 25px 0 10px;'
                }
              },
              [
                h(
                  'a-col',
                  {
                    props: {
                      flex: 'auto'
                    }
                  },
                  [
                    h('a-progress', {
                      props: {
                        percent: this.percent,
                        showInfo: false
                      },
                      attrs: {
                        style: 'width:82%'
                      }
                    }),
                    h(
                      'span',
                      {
                        attrs: {
                          style:
                            'color: rgba(0,0,0,.45);font-size: 1em;margin-left: 12px;'
                        }
                      },
                      `${this.percent}%`
                    )
                  ]
                ),
                h(
                  'a-col',
                  {
                    props: {
                      flex: '38px'
                    },
                    attrs: {
                      style: 'margin-top:2px;'
                    }
                  },
                  [
                    h('a-space', null, [
                      h('a-icon', {
                        props: {
                          type: this.startOrStopFlag ? 'pause' : 'caret-right'
                        },
                        attrs: {
                          class: ['infoText']
                        },
                        on: {
                          click: e => {
                            this.startOrStopFlag = !this.startOrStopFlag
                            //e.currentTarget 返回其事件监听器触发该事件的元素e.target（事件的目标节点）
                            e.currentTarget.style.color = '#3579ff'
                          }
                        }
                      }),
                      h('a-icon', {
                        props: {
                          type: 'close'
                        },
                        attrs: {
                          class: ['infoText'],
                          style: 'font-size: 12px;'
                        },
                        on: {
                          click: e => {
                            this.$notification.destroy()
                          }
                        }
                      })
                    ])
                  ]
                )
              ]
            ),
            h(
              'div',
              {
                attrs: {
                  style: 'margin-bottom:20px;font-size:16px'
                }
              },
              bytesToSize(this.fileList[0].size)
            ),
            h(
              'div',
              {
                attrs: {
                  class: ['errorText']
                }
              },
              'Upload is not completed, please do not switch pages!'
            )
          ])
        },
        key,
        duration: null,
        placement: 'bottomRight',
        onClose: () => {
          console.log(
            'Notification was closed. Either the close button was clicked or duration time elapsed.'
          )
        }
      })
    },