文章目錄

• • • • • • 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/

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>

4… 使用

/*** 列表查詢*/list(page) {let _this = thisLoading.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 加载效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。