2022-01-14 / syui

vue

vueでloadingを作る

$ 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')