A vue component for lazy rending vue component
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.babelrc
.npmignore
README.md
main.js
package.json
webpack.config.js

README.md

vue-lazy-render

GitHub issues GitHub forks GitHub stars Twitter

NPM

Description

A vue component for vue component lazy rending.

Vue组件,用于Vue组件的延迟渲染,改善初次进入页面或者数据量较大的页面操作时出现卡顿的情况

Installation

npm install vue-lazy-render

Usage

import LazyRender from 'vue-lazy-render'
Vue.use(LazyRender)

Props

property description type default required
time 多长时间后开始渲染组件 Number 10 false
immediately 是否立即开启延迟渲染,vue-lazy-render组件会在路由切换时,会进行一次延迟渲染,如果在同一个路由中需经常对某个组件进行延迟渲染,可以将immediately由false设为true,就会马上开启一次延迟渲染 Boolean -- false
data 如果需要延迟加载的组件是由数组渲染的,可以将数据的数据prop进vue-lazy-render组件,组件会根据配置监测数组变化,决定开启延迟加载的时机 array -- false
trackByData 是否根据data的变化来开启延迟加载,如果设为true,需将data prop进来,并且路由切换时不会再进行延迟渲染 Boolean -- false
limit 在数据超过多少后才开启延迟渲染,需要data和将trackByData设为true Number 30 false
maskClass 等待渲染时的遮罩层样式 String -- false
tip 等待渲染时的提示文字(支持直接写html) String 正在渲染,请稍候 false

Events

name description params
loaded 延迟渲染完成后的回调 --

Example

基础用法

<lazy-render>
    <my-component></my-component>
</lazy-render>

trackByData

<lazy-render :data="myArray" :time="300" :limit="50" track-by-data>
    <my-component :data="myArray"></my-component>
</lazy-render>

tip slot

<lazy-render>
    <my-component></my-component>
    <div slot="tip">this is a tip</div>
</lazy-render>  

Development

npm run dev

License

MIT