业务需求——右下角弹出图片窗口可点击下载
//底部右侧弹窗
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);
})
})
}
})
},