那个,代码一看就懂,创建组件 Lazy-load.vue 文件。
<template>
<span>
<slot v-if="success"></slot>
</span>
</template>
<script>
export default {
name: 'lazy-load',
props: {
time: {
required: false,
type: Number,
default: 200,
},
},
data() {
return {
success: false,
};
},
created() {
this.init();
},
methods: {
init() {
let vm = this;
vm.clearId = setTimeout(() => {
vm.success = true;
vm.$emit('done');
}, vm.time);
},
},
beforeDestroy() {
clearTimeout(this.clearId);
},
};
</script>
<style lang="sass" scoped>
</style>
在需要使用的地方调用,但是这里需要用到一些技巧,来实现延迟异步加载。
在项目 views/Home.vue 文件里引用延迟加载组件。
<template>
<div class="lazy-wrap">
<lazyLoad @done="lazyLoadDone = 'componentLazy'">
<component :is="lazyLoadDone"></component>
</lazyLoad>
</div>
</template>
<script>
import componentLazy from './components/componentLazy';
export default {
data() {
return {
};
},
methods: {
},
};
</script>
<style>
</style>
这样就可以实现按照指定的 setTimeout 时间来延迟异步加载组件了,是不是很简单。