hugo/content/blog/2022-01-14-vue.md

+++ date = "2022-01-14" tags = ["vue"] title = "vueでloadingを作る" slug = "vue" +++

$ yarn add vue-loading-template

https://github.com/jkchao/vue-loading

demo : https://jkchao.github.io/vue-loading/

ローディング処理はv-showで変数を指定すればOKです。

今回はボタンをクリックするとnameに文字列を入れる処理が入るのですが、その処理まで1.2s待機するようにしています。その間、ローディングが表示される仕組み。

<template>
	<div id="app">
			<Loading v-show="loading">
				<vue-loading type="barsCylon" color="#99892b" :size="{ width: '50px', height: '50px' }"></vue-loading>    
			</Loading>
			<button @click="picker" >start</button>
			<p v-show="!loading">{{ name }}</p>
	</div>
</template>

<script>
import { VueLoading } from 'vue-loading-template';
export default {
	data() {
		return {
			name:"",
			loading: false
		}
	},
	components: {
		VueLoading
	},
	methods: {
		picker: function(){
			this.loading = true;
			setTimeout(() => {
				// ここに処理	
				this.name = "test";
				this.loading = false;
			}, 1200);
		}
	}
}
</script>

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')