如下进度条不显示。
期望是在导出数据时，在layer.msg中显示导出数据的百分比进度条。
```html
layer.confirm('查询周期超过3天，系统将自动为您导出所需数据！', {icon: 7, title: '警告'}, function (index) {
layer.msg('正在下载数据，请稍候...<br><div class="progress-container"><div id="progress" class="progress"></div></div>',{ icon: 16, shade: 0.1});
var progressBar = document.getElementById("progress");
var width = 0;
var timer = setInterval(function() {
width += 10;
progressBar.style.width = width + '%';
if (width >= 100) {
clearInterval(timer);
}
}, 500);
$.ajax({
type: 'GET',
data: {"status":status,"start":start,"end":end},
url: './data.json',
contentType: "application/json",
success: function (res) {
console.log(res.data)
table.exportFile(myTable.config.id, res.data, 'csv',"明细");
}
});
// 关闭弹窗
layer.close(index);
});
```
引用 皆我百晓生 小程序回复内容作答：
您好，根据您提供的代码，我发现问题出在使用layer.msg弹窗中的HTML代码无法被正确解析和显示，进而导致进度条无法显示。这是因为layer.msg默认只接受纯文本信息，不支持解析HTML代码。
要解决这个问题，我建议您使用layer.open方法，并设置type为1，这样可以打开一个带有自定义HTML内容的弹窗。您可以将进度条的代码放在这个自定义HTML中，然后通过JavaScript代码控制进度条的变化。
以下是修改后的代码示例：
layer.confirm('查询周期超过3天，系统将自动为您导出所需数据！', {icon: 7, title: '警告'}, function (index) {
layer.open({
type: 1,
title: false,
closeBtn: false,
area: '300px',
shade: 0.1,
content: '正在下载数据，请稍候...<br><div class="progress-container"><div id="progress" class="progress"></div></div>'
});
var progressBar = document.getElementById("progress");
var width = 0;
var timer = setInterval(function() {
width += 10;
progressBar.style.width = width + '%';
if (width >= 100) {
clearInterval(timer);
}
}, 500);
$.ajax({
type: 'GET',
data: {"status": status, "start": start, "end": end},
url: './data.json',
contentType: "application/json",
success: function (res) {
console.log(res.data)
table.exportFile(myTable.config.id, res.data, 'csv', "明细");
}
});
// 关闭弹窗
layer.close(index);
});
这样，进度条应该可以正确地显示出来并随着时间递增。请注意，此示例使用了layer.open方法创建弹窗，通过设置title和closeBtn为false来隐藏标题栏和关闭按钮，设置area为'300px'来定义弹窗宽度。您可以根据需要调整这些参数。
【以下回答由 GPT 生成】
通过观察代码和描述，发现问题的关键在于进度条的显示。你使用了layer.msg方法来显示进度条，然后使用了原生的JavaScript代码来更新进度条的宽度。但是这样做是不起作用的，因为layer.msg方法返回的是一个浮动层，不支持像素级的定位和样式操作。所以需要使用其他方法来显示百分比进度条。
在layui框架中，可以使用layer.open方法打开一个自定义的弹窗，并在弹窗中加载进度条，下面是修改后的代码：
layer.confirm('查询周期超过3天，系统将自动为您导出所需数据！', {
icon: 7,
title: '警告'
}, function (index) {
layer.open({
type: 1,
title: '正在下载数据，请稍候...',
content: '<div class="progress-container"><div id="progress" class="progress"></div></div>',
success: function (layero, index) {
var progressBar = layero.find("#progress");
var width = 0;
var timer = setInterval(function() {
width += 10;
progressBar.css("width", width + '%');
if (width >= 100) {
clearInterval(timer);
layer.close(index);
}
}, 500);
$.ajax({
type: 'GET',
data: {"status":status,"start":start,"end":end},
url: './data.json',
contentType: "application/json",
success: function (res) {
console.log(res.data);
table.exportFile(myTable.config.id, res.data, 'csv', '明细');
}
});
}
});
});
这里使用了layer.open方法来打开一个自定义的弹窗，弹窗的内容是一个包含进度条的div容器。在成功回调函数中，通过layero对象获取弹窗的DOM元素，然后使用jQuery的css方法来更新进度条的宽度。
希望对你有所帮助！如果还有其他问题，请随时提问。
【相关推荐】