1.0.20 • Published 7 years ago

vue-lazy-render v1.0.20

Weekly downloads
28
License
MIT
Repository
github
Last release
7 years ago

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

propertydescriptiontypedefaultrequired
time多长时间后开始渲染组件Number10false
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设为trueNumber30false
maskClass等待渲染时的遮罩层样式String--false
tip等待渲染时的提示文字String正在渲染,请稍候false

Events

namedescriptionparams
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>

Development

npm run dev

License

MIT

1.0.20

7 years ago

1.0.19

7 years ago

1.0.18

7 years ago

1.0.17

7 years ago

1.0.16

7 years ago

1.0.15

7 years ago

1.0.14

7 years ago

1.0.13

7 years ago

1.0.12

7 years ago

1.0.11

7 years ago

1.0.10

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago