100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > ant-vue通知提醒框( Notification )实现自定义样式

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

时间:2024-02-01 09:46:32

相关推荐

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.')}})},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。