Vuetify에서 로딩(loading) 화면 나타내기

 

 

 

로딩(loading) 화면 나타내기

 

 

 

---

<버전 정보>

• vuetify version : 2.6.0

 

---

 

<사용 계기>

• Vuetify을 사용하여 포트폴리오용 웹 앱을 개발하고 있던 중 Firebase에서 DB를 불러올 때 로딩이 있어서 로딩 화면을 보여주면 어떨까하게 되어 사용하게 되었다.

 

---

 

<적용 과정>

• 로딩화면을 적용하기 위하여 <v-progress-circular> 태그를 사용하였고, 적용할 태그와 같은 곳의 상단에 위치시켜 특정 조건에 만족하면 보이게끔 작업하였다.

 

---

 

<실제 코드>

<template>
  <v-progress-circular
    v-if="loading"
    :size="50"
    color="amber"
    indeterminate
  >
  </v-progress-circular>
</template>


<script>
export default {
  data () {
    return {
      loading: false // 로딩 초기값
    }
  },
  methods: {
    onLoading () { // 로딩화면 on
      this.loading = true
    },
    offLoading () { // 로딩화면 off
      this.loading = false
    }
  }  
</script>

loading 값이 true일 때 작동 화면

 

• <v-progress-circular> 태그 안의 속성을 보면 v-if에 특정 조건(여기서는 loading의 값이 true이면 보이도록 함)에 만족하면 보이도록 설정하고, size 속성은 로딩 화면의 크기, color는 색깔, indeterminate 속성은 계속 돌아가게 한다.
• 그리고 언제 어디서 보여줄 것인지 <script>에 함수를 사용하여 동작하게 한다.

 

---

 

<정리>

• vuetify를 사용하여 로딩 화면을 구현해보았다.
• 의외로 적용하는 것이 쉬워서 필자도 처음 사용할 때에는 긴가민가하였다.
• 예전 같으면 자바스크립트로 하나하나 코드를 짜서 만들었을 텐데 이제는 태그와 속성으로 쉽게 구현할 수 있게 되었다.
• 다른 UI 컴포넌트의 사용이 쉬워져서 웹이나 앱을 만들기도 쉬워졌으나, 필요한 UI를 적재적소에 적용할 수 있는 눈을 키우면 더 좋을 것 같다.

 

---

 

<참고 페이지>

• vuetify의 progress-circular 공식 사이트 : https://vuetifyjs.com/en/components/progress-circular/

Progress circular component