文章目錄

• • • • • • 1. 工具類
          • 2. 插件官網(wǎng)
          • 3. 導(dǎo)入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顯示一瞬間，故意做個(gè)延遲// setTimeout(function () {// $.unblockUI();// }, 500)// } };

2. 插件官網(wǎng)

官網(wǎng)：http://malsup.com/jquery/block/

3. 導(dǎo)入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("查詢大章列表結(jié)果:", res)let resp = res.data_this.chapters = resp.content.list//重新渲染_this.$refs.pagination.render(page, resp.content.total)})},

5. 效果圖

總結(jié)

以上是生活随笔為你收集整理的vue 集成 Loading 加载效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。