记录Ant Design of Vue Notification 通知提醒框右下角弹出动态赋值图片

原创已于 2022-09-16 13:24:26 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-09-16 11:22:37 首次发布

本文介绍了如何在Vue应用中使用Ant Design of Vue开发一个右下角的弹出图片窗口，点击图片可下载附件，通过Promise处理异步通知并展示图片样式。

业务需求——右下角弹出图片窗口可点击下载

//底部右侧弹窗
      openNotification(imgURL,zipURL) {
        this.$notification.open({
          description:<img src={`${imgURL}`} style='max-width:100%;height:auto;margin-top:-21px;cursor: pointer;'/>,
          onClick:()=>{
            this.download(zipURL)
        },
          style:{
            padding:0,
            margin:5,
        },
          placement: 'bottomRight',
            duration:null,
          closeIcon:false
        });
      },

style='max-width:100%;height:auto;margin-top:-21px;cursor: pointer;
图片样式解析
max-width:100%;height:auto;//图片平铺填充
margin-top:-21px;//去除通知框顶部宝色边框
cursor: pointer;鼠标移上去转换小手
notification内联样式解析
style:{
padding:0,//去除通知框左右下侧白色外框
margin:5,//多个通知框弹出上下间隔
},
其余config 参数Ant Design of Vue官网自行查询

data() {
      return {
        notifyPromise: Promise.resolve(),//转为 Promise 对象，需要异步弹出通知框
      }
    },
queryZipFileList() {
        const that = this
        getAction(this.url.list,{}).then(res=>{
          if(res.success){
            let dataSource = res.result.records
            console.log("dataSource----",dataSource)
            dataSource.forEach((item,index)=>{
              item.imgURL = `${this.url.downloadImgURL}?id=${item.id}`;
              item.zipURL = `${this.url.downloadZipURL}?id=${item.id}`;
              that.notifyPromise = that.notifyPromise.then(() => {//异步操作调用弹出方法
                console.log("index------",index+"次循环")
                that.openNotification(item.imgURL,item.zipURL);
              })
            })
          }
        })
      },

在这里插入图片描述