ant-vue通知提醒框（ Notification ）实现自定义样式
需求：运用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.'
)
}
})
},