https://github.com/heftykoo/vue-lazy-render

A vue component for lazy rending vue component
https://github.com/heftykoo/vue-lazy-render

vue vue-components vue-lazy-render vue-plugin

Last synced: 3 months ago
JSON representation

A vue component for lazy rending vue component

• Host: GitHub
• URL: https://github.com/heftykoo/vue-lazy-render
• Owner: HeftyKoo
• Created: 2016-12-23T15:47:51.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-06-27T14:55:22.000Z (over 7 years ago)
• Last Synced: 2024-10-29T10:45:20.379Z (4 months ago)
• Topics: vue, vue-components, vue-lazy-render, vue-plugin
• Language: Vue
• Size: 41 KB
• Stars: 233
• Watchers: 9
• Forks: 48
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-lazy-render

[![GitHub issues](https://img.shields.io/github/issues/yeyuqiudeng/vue-lazy-render.svg)](https://github.com/yeyuqiudeng/vue-lazy-render/issues)

[![GitHub forks](https://img.shields.io/github/forks/yeyuqiudeng/vue-lazy-render.svg)](https://github.com/yeyuqiudeng/vue-lazy-render/network)

[![GitHub stars](https://img.shields.io/github/stars/yeyuqiudeng/vue-lazy-render.svg)](https://github.com/yeyuqiudeng/vue-lazy-render/stargazers)

[![Twitter](https://img.shields.io/twitter/url/https/github.com/yeyuqiudeng/vue-lazy-render.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=%5Bobject%20Object%5D)

[![NPM](https://nodei.co/npm/vue-lazy-render.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-lazy-render/)

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

### 基础用法

    

        

    

### trackByData

    

        

    

    

### tip slot

    

        

        
this is a tip

      

  

## Development


    npm run dev

## License

[MIT](https://opensource.org/licenses/MIT)