VUE 导出按钮设置加载中-导出完成恢复

1  导出按钮

　　添加:loading="loading"

<el-button type="primary" :loading="loading" plain @click="exPort">导出</el-button>

 

2 data中初始化loading为false

loading:false

 

3 导出功能

　　导出时设置loading为true

　　使用window.open去下载，获取到实例对象，使用addEventListener监听下载进度，完成时设置loading为false

exPort(){
            var that = this
            this.loading = true
            var params = "livingspot=" + that.search.livingspot + "&building=" + that.search.building
            var downloadurl= 'https://www.xxx.cn/dev-api/vitalSigns/download?' + params;
            let net = window.open(downloadurl)
            net.addEventListener("beforeunload", e => {
                this.loading = false
            });
        }