vue-lazy-component

vue-lazy-component使用

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.参数以及事件的介绍