1.介绍:是vue组件懒加载的预估插件组件。支持组件组件延时加载, 加载真实组件前展示骨架组件,提高用户体验,真实组件代码分包异步加载
// 安装 npm install @xunlei/vue-lazy-component // 使用方式一 // main.js文件中全局注册使用 import VueLazyComponent from '@xunlei/vue-lazy-component' Vue.use(VueLazyComponent) // 使用方式二 // 在组件中实现局部注册组件 import { component as VueLazyComponent } from '@xunlei/vue-lazy-component' export default { components: { 'vue-lazy-component': VueLazyComponent } }
2.在组件中使用懒加载组件
<!-- 需要懒加载的组件将其包裹在vue-lazy-component中 slot值为 skeleton 指的是在懒加载过程中显示的加载状态组件 --> <vue-lazy-component :timeout="5000" tagName="div"> <child1 slot="skeleton" /> <child2 /> <child3 /> <child4 /> <child5 /> </vue-lazy-component>
3.参数以及事件的介绍
标签:Lazy,Vue,Component,VueLazyComponent,component,lazy,vue,组件,加载 From: https://www.cnblogs.com/luoguixin/p/17124300.html