[ Update ] : 1.nav bar 下拉選單UI 微調，將localStorage存入store 監聽角色來去改變下拉選單對應項目 2. ...

劉鈞霖

2021-11-19 338b53c9ed0571319a397873b409f45cb8e4202f

 PAMapp/components/loading.vue

@@ -1,42 +1,47 @@
<template>
    <div class="pam-loading" v-if="isLoading">
        <lottie
        :options="defaultOptions"
        :width="250"
        :height="250"
        :loop="true"/>
    </div>
  <div class="pam-loading"
    v-if="isLoading">
    <lottie :options="defaultOptions"
      :width="250"
      :height="250"
      :loop="true" />
  </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'nuxt-property-decorator';
    import Lottie from 'vue-lottie/src/lottie.vue';
    @Component({
        components:{
            'lottie':Lottie
        }
    })
    export default class Loading extends Vue {
        isLoading=false;
        defaultOptions={ animationData: require('@/assets/lottie/loading.json')};
        start():void{
            this.isLoading = true;
        }
        finish():void{
            this.isLoading = false;
        }
  import { Component, Vue } from 'nuxt-property-decorator';
  import Lottie from 'vue-lottie/src/lottie.vue';
  @Component({
    components: {
      'lottie': Lottie
    }
  })
  export default class Loading extends Vue {
    isLoading = false;
    defaultOptions = {
      animationData: require('@/assets/lottie/loading.json')
    };
    start(): void {
      this.isLoading = true;
    }
    finish(): void {
      this.isLoading = false;
    }
  }

</script>

<style lang="scss" scoped>
    .pam-loading{
        position: absolute;
        background-color: rgba(#222222,0.5);
        width: 100%;
        height: 100%;
        z-index: 99;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<style lang="scss"
  scoped>
  .pam-loading {
    position: absolute;
    background-color: rgba(#222222, 0.5);
    width: 100%;
    height: 100%;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
  }

</style>