67 lines
1.3 KiB
Markdown
67 lines
1.3 KiB
Markdown
|
+++
|
||
|
|
date = "2022-01-14"
|
||
|
|
tags = ["vue"]
|
||
|
|
title = "vueでloadingを作る"
|
||
|
|
slug = "vue"
|
||
|
|
+++
|
||
|
|
|
||
|
|
```sh
|
||
|
|
$ yarn add vue-loading-template
|
||
|
|
```
|
||
|
|
|
||
|
|
https://github.com/jkchao/vue-loading
|
||
|
|
|
||
|
|
demo : https://jkchao.github.io/vue-loading/
|
||
|
|
|
||
|
|
ローディング処理は`v-show`で変数を指定すればOKです。
|
||
|
|
|
||
|
|
今回はボタンをクリックすると`name`に文字列を入れる処理が入るのですが、その処理まで`1.2s`待機するようにしています。その間、ローディングが表示される仕組み。
|
||
|
|
|
||
|
|
```js:src/App.vue
|
||
|
|
<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>
|
||
|
|
```
|
||
|
|
|
||
|
|
```js:src/main.js
|
||
|
|
import Vue from 'vue'
|
||
|
|
import App from './App.vue'
|
||
|
|
|
||
|
|
Vue.config.productionTip = false
|
||
|
|
|
||
|
|
new Vue({
|
||
|
|
render: h => h(App)
|
||
|
|
}).$mount('#app')
|
||
|
|
```
|