GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → xunleif2e → Vue Lazy Component

xunleif2e / Vue Lazy Component

Licence: mit
🐌 Vue.js 2.x 组件级懒加载方案-Vue.js 2.x component level lazy loading solution

Labels

vueplugincomponentlazyload

Projects that are alternatives of or similar to Vue Lazy Component

Vue Slide Bar
🎢 A Simple Vue Slider Bar Component.
Stars: ✭ 129 (-85.9%)
Mutual labels:  plugin, component
Zsh Lazyload
zsh plugin for lazy load commands and speed up start up time of zsh
Stars: ✭ 33 (-96.39%)
Mutual labels:  plugin, lazyload
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (-86.12%)
Mutual labels:  plugin, component
React Native Wormhole
⚛️ 🌌 Inter-dimensional Portals for React Native. 👽 🖖
Stars: ✭ 133 (-85.46%)
Mutual labels:  plugin, component
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (-79.45%)
Mutual labels:  plugin, component
Vue Context Menu
🗃️ Vue 2.x 右键菜单组件，菜单内容可以随意自定义
Stars: ✭ 279 (-69.51%)
Mutual labels:  plugin, component
Vue Plugin Template
🚀 Solid foundation to start a Vue plugin with the best developer experience and a focus on performance
Stars: ✭ 189 (-79.34%)
Mutual labels:  plugin, component
Vuewordcloud
Generates a cloud out of the words.
Stars: ✭ 284 (-68.96%)
Mutual labels:  plugin, component
React Accordion With Header
React accordion component with flexbox header
Stars: ✭ 14 (-98.47%)
Mutual labels:  component
Codeception Mailtrap
Codeception module to test email using Mailtrap.io
Stars: ✭ 15 (-98.36%)
Mutual labels:  plugin
Openiterm2
Opening iTerm2 in the current directory.
Stars: ✭ 14 (-98.47%)
Mutual labels:  plugin
Interfacetable v3t
interfacetable_v3t (formerly check_interface_table_v3t)
Stars: ✭ 14 (-98.47%)
Mutual labels:  plugin
Mysimbl
📦 Plugin manager for macOS
Stars: ✭ 909 (-0.66%)
Mutual labels:  plugin
Vimnavigation
Vim style keyboard navigation.
Stars: ✭ 14 (-98.47%)
Mutual labels:  plugin
React Pricing Table
💶 Fast, flexible, simple pricing tables in React.
Stars: ✭ 21 (-97.7%)
Mutual labels:  component
Sass Webpack Plugin
[Deprecated] 🌈 Get your stylesheets together
Stars: ✭ 14 (-98.47%)
Mutual labels:  plugin
Routing
The Routing component maps an HTTP request to a set of configuration variables.
Stars: ✭ 7,080 (+673.77%)
Mutual labels:  component
Transport Pipes
Buildcraft without mods!
Stars: ✭ 21 (-97.7%)
Mutual labels:  plugin
Dotnet Assembly Grapher
Reverse engineering and software quality assurance tool for .NET assemblies
Stars: ✭ 21 (-97.7%)
Mutual labels:  component
Ks Unlimited Marquee
🐞 A unidirectional scrollable React component.
Stars: ✭ 15 (-98.36%)
Mutual labels:  component
View All Similar Projects ➔

Vue Lazy Component

npm Commitizen friendly Git flow work flow GitHub stars GitHub issues GitHub forks GitHub license

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

English version documentation

特性

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

安装 / Installation

npm install @xunlei/vue-lazy-component

在线demo / Online demo

https://xunleif2e.github.io/vue-lazy-component/demo/dist/index.html

使用

1. 注册组件

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

import VueLazyComponent from '@xunlei/vue-lazy-component'
import Vue from 'vue'

Vue.use(VueLazyComponent)

方式2 局部注册

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

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

方式3 独立版本引入，自动全局注册

前提是 vue 也是独立版本通过script标签引入

<script src="https://unpkg.com/@xunlei/[email protected]/dist/vue-lazy-component.js"></script>

2. 模版语法

 <vue-lazy-component
  @init="init"
  @beforeInit="beforeInit"
 >
  <!-- real component-->
  <st-series-sohu/>
  <!-- skeleton component -->
  <st-series-sohu-skeleton slot="skeleton"/>
</vue-lazy-component>

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

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

IntersectionObserver API polyfill

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

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

Development Setup

# install deps
npm install

# serve demo at localhost:8080
npm run dev

# build library and demo
npm run build

# build library
npm run build:library

# build demo
npm run build:demo

# commit use commitizen
npm run commit

# pre publish
npm run prepublish

# generate changelog
npm run changelog

Roadmap

  • [x] SSR 支持 @ v1.1.0

  • [ ] UI单元测试 @ v1.2.0

  • [ ] 减少性能开销 @ v1.3.0

License

MIT

Copyright (c) 2017 XunleiF2E

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].