@layson/vue-lazy-component NPM

@layson/vue-lazy-component

对于网站首页巨大篇幅多图片，多接口请求vue懒加载处理方案

🐌 Vue.js 2.x 组件级懒加载方案

特性

支持组件可见或即将可见时懒加载
支持组件延时加载
支持加载真实组件前展示骨架组件，提高用户体验
支持真实组件代码分包异步加载

安装

npm install @layson/vue-lazy-component

使用

1. 注册组件

方式1 利用插件方式全局注册

import Vue from 'vue';
import VueLazyComponent from '@layson/vue-lazy-component';

Vue.use(VueLazyComponent)

方式2 局部注册

import { component as VueLazyComponent } from '@layson/vue-lazy-component'

export default {
  // ...
  components: {
    'vue-lazy-component': VueLazyComponent
  }
}

2. 模版语法

html

 <!-- 看需要使用Props和Events -->
 <vue-lazy-component
  @init="init"
  @beforeInit="beforeInit"
 >
 
  <!-- 真实显示的组件 -->
  <template scope="scope">
    <!-- scope.loading 懒加载自动实现切换为true -->
    <st-series-sohu v-if="scope.loading"/>
  </template>
  
  <!-- 骨架屏，当scope.loading未显示时展示使用的组件 -->
  <st-series-sohu-skeleton slot="skeleton"/>
</vue-lazy-component>

js

 import css文件;
 import 组件;
 
 components: {
   StSeriesSohuSkeleton,
   StSeriesSohu (resolve) {
     require(['@/components/StSeriesSohu'], resolve)
   }
 }

Props

参数	说明	类型	可选值	默认值
viewport	组件所在的视口，如果组件是在页面容器内滚动，视口就是该容器	HTMLElement	true	`null`，代表视窗
direction	视口的滚动方向, `vertical`代表垂直方向，`horizontal`代表水平方向	String	true	`vertical`
threshold	预加载阈值, css单位	String	true	`0px`
tagName	包裹组件的外层容器的标签名	String	true	`div`
timeout	等待时间，如果指定了时间，不论可见与否，在指定时间之后自动加载	Number	true	-

Events

事件名	说明	事件参数
before-init	模块可见或延时截止导致准备开始加载懒加载模块	-
init	开始加载懒加载模块，此时骨架组件开始消失	-
before-enter	懒加载模块开始进入	el
before-leave	骨架组件开始离开	el
after-leave	骨架组件已经离开	el
after-enter	懒加载模快已经进入	el
after-init	初始化完成	-

注意 / Notes

该项目依赖 IntersectionObserver API，如需在较低版本浏览器运行，需要引入 IntersectionObserver API polyfill

IntersectionObserver API polyfill

https://github.com/w3c/IntersectionObserver/tree/master/polyfill

webpack 分包异步加载方式依赖 Scoped Component Slots, 需要 Vue 版本大于2.1.0

https://cn.vuejs.org/v2/guide/components.html#作用域插槽

vue.js vue-plugin vue-component

@everything-registry/sub-chunk-537

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago