Vue.JS開源:vue-lazy-render - 延遲渲染 Vue 組件，增強頁面切換流暢度

zhrx6952 7年前發布 | 25K 次閱讀 Vue.js Vue.js開發

vue-lazy-render

A vue component for vue component lazy rending.

Vue組件,用于Vue組件的延遲渲染,改善初次進入頁面或者數據量較大的頁面操作時出現卡頓的情況

npm install vue-lazy-render

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

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	等待渲染時的提示文字	String	正在渲染,請稍候	false

name	description	params
loaded	延遲渲染完成后的回調	--

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

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

來自：https://github.com/yeyuqiudeng/vue-lazy-render

本文由用戶 zhrx6952 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！