Question

在Laravel 5.3上使用Vue 2

我想添加一个加载图标，覆盖整个页面3秒钟，允许所有渲染发生，然后在3秒后显示内容。但是，如果没有或者添加div v-show="!loading"如下所示，内容实际上会在消失之前闪烁大约半秒，然后在3秒之后再次出现。所以我认为加载页面时开始时会出现意外的闪烁。我在线阅读了v-cloak，但似乎只能解决{{}}的短暂闪现问题？

<template>
  <div>
    <transition name="fade">
      <div v-if="loading" class="loading">Loading&#8230;</div>
    </transition>
    <div v-show="!loading">
      <slot>

        <!-- Main Content -->

      </slot>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        loading:true
      }
    },
    props:[
    ],
    mounted(){
      var vm = this
      vm.loaded()
      LoadingEvent.$on('loading', function(loading){
        vm.loading = loading
      })
    },
    updated(){
    },
    methods:{
      loaded(){
        setTimeout(function(){
          LoadingEvent.$emit('loading',false);
        }, 1000);
      },
    }
  }
</script>

Answer 1

尝试在transition内添加v-if和v-else，如下所示：

<template>
  <div>
    <transition name="fade">
      <div v-if="loading" class="loading">Loading&#8230;</div>
      <div v-else>
        <slot>

         <!-- Main Content -->

       </slot>
     </div>
    </transition>
  </div>
</template>

Vue 2在特定时间后显示所有内容

1 个答案: