想显示加载中没有效果
$("#btnvosp").click(function() {
var loadingIndex = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
var formData = new FormData();
formData.append("excelFile", $("#vocabularysp")[0].files[0]);
$.ajax({
url: "importExcelVocabularySp",
data: formData,
type: "post",
processData: false,
contentType: false,
before: function () {
loadingIndex = layer.load();
},
success: function(data) {
console.log(data)
},
error: function() {
alert("失败")
}
});
})
<form action="importExcelVocabularySp" method="post" enctype="multipart/form-data" class="layui-form layui-form-pane" >
<input type="file" id="vocabularysp" name="vospContent">
<div class="layui-form-item">
<button class="layui-btn" lay-submit="" lay-filter="importtsp" id='btnvosp'>导入搜索词SP</button>
</div>
</form>
$("#btnvosp").click(function() {
var index_wait
var formData = new FormData();
formData.append("excelFile", $("#vocabularysp")[0].files[0]);
$.ajax({
url: "importExcelVocabularySp",
data: formData,
type: "post",
processData: false,
contentType: false,
beforeSend: function(){
index_wait = layer.load(0, { //发送请求前调用load方法
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
},complete: function () { //load默认不会关闭，请求完成需要在complete回调中关闭
layer.close(index_wait);
},
success: function(data) {
console.log(data)
},
error: function() {
alert("失败")
}
});
})
【以下回答由 GPT 生成】
在Vue.js中，使用layui的加载中效果可能会出现问题。原因是Vue.js的事件绑定方式与layui的事件绑定方式不兼容。所以需要进行一些调整来解决这个问题。
下面是解决方案：
首先，将HTML代码中的<button>标签改为layui的按钮形式，同时加上lay-submit和lay-filter属性。这样可以通过layui的表单监听来实现对按钮点击事件的处理。
<form action="" method="post" enctype="multipart/form-data" class="layui-form layui-form-pane">
<input type="file" id="vocabularysp" name="vospContent">
<div class="layui-form-item">
<button class="layui-btn" lay-submit="" lay-filter="importtsp" id='btnvosp'>导入搜索词SP</button>
</div>
</form>
然后，需要在Vue实例中注册layui的表单监听，以处理按钮点击事件。通过监听importtsp事件来触发导入操作。
var app = new Vue({
el: '#app',
created: function() {
var _this = this;
layui.use('form', function() {
var form = layui.form;
form.on('submit(importtsp)', function(data) {
_this.importExcelVocabularySp(data.field);
return false; // 阻止表单提交
});
});
},
methods: {
importExcelVocabularySp: function(formData) {
// 获取文件
var file = document.getElementById('vocabularysp').files[0];
// 创建FormData对象
var fd = new FormData();
fd.append('vospContent', file);
// 显示加载中效果
var loadingIcon = layer.load(1, {
shade: [0.1, '#fff']
});
// 发送导入请求
axios.post('importExcelVocabularySp', fd)
.then(function(response) {
console.log(response.data);
// 导入成功，隐藏加载中效果
layer.close(loadingIcon);
})
.catch(function(error) {
console.log(error);
// 导入失败，隐藏加载中效果
layer.close(loadingIcon);
});
}
}
});
最后，加入Vue.js的实例化代码，并引入layui、axios和layer库。
<!DOCTYPE html>
<html>
<head>
<title>Vue.js with layui</title>
<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
<div id="app">
<form action="" method="post" enctype="multipart/form-data" class="layui-form layui-form-pane">
<input type="file" id="vocabularysp" name="vospContent">
<div class="layui-form-item">
<button class="layui-btn" lay-submit="" lay-filter="importtsp" id='btnvosp'>导入搜索词SP</button>
</div>
</form>
</div>
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layer/3.1.1/layer.js"></script>
<script>
// Vue.js实例化代码
var app = new Vue({
el: '#app',
created: function() {
var _this = this;
layui.use('form', function() {
var form = layui.form;
form.on('submit(importtsp)', function(data) {
_this.importExcelVocabularySp(data.field);
return false; // 阻止表单提交
});
});
},
methods: {
importExcelVocabularySp: function(formData) {
// 获取文件
var file = document.getElementById('vocabularysp').files[0];
// 创建FormData对象
var fd = new FormData();
fd.append('vospContent', file);
// 显示加载中效果
var loadingIcon = layer.load(1, {
shade: [0.1, '#fff']
});
// 发送导入请求
axios.post('importExcelVocabularySp', fd)
.then(function(response) {
console.log(response.data);
// 导入成功，隐藏加载中效果
layer.close(loadingIcon);
})
.catch(function(error) {
console.log(error);
// 导入失败，隐藏加载中效果
layer.close(loadingIcon);
});
}
}
});
</script>
</body>
</html>
请注意，上述代码中使用了CDN来加载所需的库文件，如果你在本地开发，请相应地更改引用路径。
这样，当你点击按钮时，会触发Vue实例中的importExcelVocabularySp函数，其中会先显示加载中效果，然后再发送导入请求。当请求返回成功或失败时，会隐藏加载中效果。
希望这个解决方案对你有帮助！如果还有其他问题，请随时提问。
【相关推荐】