需求:运用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.')}})},