本篇筆記在一般頁面中，如何套用Vue Loading的方式。
緣起
由於最近開始在接觸 Vue.js，並套用在MVC的專案中，在透過 axios 透過 api 讀取載入資料的過程中，希望可以有個讀取中的一個動畫，這讓小喵去搜尋了一下 Vue 是否有類似 jQuery 一樣，有一些寫好的套件可以去套用。不過由於小喵是套用在 MVC 的 View 裡面，所以與一般透過 TypeScript 的方式不太一樣，順便熟悉練習一下。
套件
小喵使用的套件是以下的這一套
https://www.npmjs.com/package/vue-loading-overlay
很幸運的，在這一篇的最下方，有提示沒有 WebPack 的方式如下：
<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3/dist/vue-loading.css" rel="stylesheet">
<!-- Init the plugin and component-->
<script>
Vue.use(VueLoading);
Vue.component('loading', VueLoading)
</script>
範例
小喵嘗試的自己練習看看，寫個單純的html + Vue.js + Vue Loading相關程式碼如下：
首先是HTML的部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<loading :active.sync="LoaderVisiable" :can-cancel="true"></loading>
<button v-on:click="open">Programmatic Show</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3/dist/vue-loading.css" rel="stylesheet">
</body>
</html>
接著是 Vue 的部分：
Vue.use(VueLoading);
var app = new Vue({
el: '#app',
data: {
LoaderVisiable: false
},
components: {
Loading: VueLoading
},
methods:{
open:function(){
console.log('open');
let loader = this.$loading.show({
loader: 'dots'
});
setTimeout(() => loader.hide(), 3 * 1000);
}
}
})
相關範例，小喵放在jsbin，網址如下：
https://jsbin.com/qowusaquvo/edit?html,js,console,output
套用在axios讀取
這部分，在讀取前顯示，讀取完成後隱藏即可。
小喵就只紀錄JS的部分如下：
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-loading-overlay@3/dist/vue-loading.css" rel="stylesheet">
<script>
Vue.use(VueLoading);
var app = new Vue({
el: '#app',
data: {
QueryShow: true,
EditShow: false,
btnAddShow: true,
btnUpdateShow: true,
btnDelShow: true,
LoaderVisiable: false,
Menus: [],
EditItem: {}
},
components: {
Loading: VueLoading
},
methods: {
getData: function () {
let loader = this.$loading.show({
loader: 'dots'
});
let sURL = '/api/Menus';
axios
.get(sURL)
.then(
response => {
this.Menus = response.data;
//console.log(this.Menus);
loader.hide();
}
)
.catch(function (error) {
console.log(error);
alert(error);
})
}
},
mounted: function () {
this.getData();
}
})
</script>
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |