0
点赞
收藏
分享

微信扫一扫

vue 集成 Loading 加载效果

一世独秀 2022-09-05 阅读 179


vue 集成 Loading 加载效果_ide

文章目录

  • ​​1. 工具类​​
  • ​​2. 插件官网​​
  • ​​3. 导入js​​
  • ​​4.. 使用​​
  • ​​5. 效果图​​
1. 工具类

Loading = {
show: function () {
$.blockUI({
message: '<img src="/static/image/loading.gif" />',
css: {
zIndex: "10011",
padding: "10px",
left: "50%",
width: "80px",
marginLeft: "-40px",
}
});
},
hide: function () {
$.unblockUI();
}
// hide: function () {
// // 本地查询速度太快,loading显示一瞬间,故意做个延迟
// setTimeout(function () {
// $.unblockUI();
// }, 500)
// }
};

2. 插件官网

官网:​​http://malsup.com/jquery/block/​​

vue 集成 Loading 加载效果_官网_02

3. 导入js

<!-- loading等待框-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.blockUI/2.70.0-2014.11.23/jquery.blockUI.min.js"></script>
<script src="<%= BASE_URL %>static/js/loading.js"></script>

vue 集成 Loading 加载效果_ide_03

4… 使用

/**
* 列表查询
*/
list(page) {
let _this = this
Loading.show()
_this.$api.post('http://127.0.0.1:9000/business/admin/chapter/list', {
page: page,
size: _this.$refs.pagination.size
}).then((res) => {
Loading.hide()
console.log("查询大章列表结果:", res)
let resp = res.data
_this.chapters = resp.content.list
//重新渲染
_this.$refs.pagination.render(page, resp.content.total)
})
},

5. 效果图

vue 集成 Loading 加载效果_ide


举报

相关推荐

0 条评论