2

I am using Advanced-Async-Components to load async component after loading of the app. So I have tried the following code:

Index.vue

<template>
    <div class="">
        <Async></Async>
    </div>
</template>

<script>
    // async component
    import LoadComp from '@/components/Loading'
    import ErrorComp from '@/components/Error'
    const Async = () => ({
        // The component to load. Should be a Promise
        component: import('@/components/Async'),
        // A component to use while the async component is loading
        loading: Load,
        // A component to use if the load fails
        error: ErrorComp,
        // Delay before showing the loading component. Default: 200ms.
        delay: 4000, // <--- this is not effecting the loading of component
        // The error component will be displayed if a timeout is
        // provided and exceeded. Default: Infinity.
        timeout: 3000
    })

export default {
    components: {
        Async
    }
}
</script>

Async.vue

<template lang="html">
    <div class="">
        Lorem ipsum dolor sit amet, con .... very larger string/data
    </div>
</template>

<script>
export default {
}
</script>

<style lang="css">
</style>

The above code works fine but it has no effect of delay parameter (Index.vue). According to official docs delay is Delay before showing the loading component. It should load the component after 4000ms but it loads instantly.

Why is this happening?

Is there any other way to achieve this apart from using setTimeout?

Additional Info

I used webpack template to build the project using vue-cli

Vue version : ^2.4.2
4

1 回答 1

2

发生这种情况是因为该选项设置了显示加载delay组件之前的延迟量（以毫秒为单位），这是您通过选项指定的组件，以在异步组件加载时显示（该文档的措辞不佳）。loading

在下面的示例中，一秒后加载了两个异步组件。第一个没有延迟，它的加载组件 ( LoadingComponent) 将立即显示。第二个有一个delayof 500，意思是半秒后，它会显示它的加载组件。

const LoadingComponent = { template: `<h1>Loading...</h1>` }
const NumberBoxComponent = { template: `<h1>123123</h1>` }

const AsyncComponent1 = () => ({
  component: new Promise((resolve) => {
    setTimeout(() => {
      resolve(NumberBoxComponent)
    }, 1000)
  }),
  loading: LoadingComponent,
})

const AsyncComponent2 = () => ({
  component: new Promise((resolve) => {
    setTimeout(() => {
      resolve(NumberBoxComponent)
    }, 1000)
  }),
  loading: LoadingComponent,
  delay: 500
})

new Vue({
  el: '#app',
  components: {
    'async-component1': AsyncComponent1,
    'async-component2': AsyncComponent2
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <async-component1></async-component1>
  <async-component2></async-component2>
</div>

如果你想延迟异步组件的实际加载，你应该使用setTimeout.

于 2017-10-06T13:05:42.213 回答