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

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

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

ant-vue通知提醒框( Notification )实现自定义样式_第1张图片

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

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

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

主要实现代码如下:

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

ant-vue通知提醒框( Notification )实现自定义样式_第2张图片

ant-vue通知提醒框( Notification )实现自定义样式_第3张图片

 //上传进度通知栏
    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.'
          )
        }
      })
    },

你可能感兴趣的:(前端Vue,vue.js,javascript,前端)