一蒸绩、 簡單使用實(shí)例:
這個插件還是蠻好用的祭钉,就是感覺這個插件的開發(fā)文檔有點(diǎn)太啰嗦了,一股腦把所有的api擴(kuò)展都羅列出來它改,源碼中并沒有可以運(yùn)行的實(shí)例提供疤孕。
其實(shí)這個插件做簡單使用的話是很簡單的,看官方文檔的話反而被誤導(dǎo)了央拖,可以先按下邊的實(shí)例實(shí)現(xiàn)簡單引用祭阀,后邊再根據(jù)開發(fā)文檔做擴(kuò)展。
1鲜戒、 安裝插件:
npm install vue-lazyload --save-dev
2专控、 main.js引入插件:
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
error:'./static/error.png',
loading:'./static/loading.png'
})
3、vue文件中將需要懶加載的圖片綁定 v-bind:src 修改為 v-lazy
<img class="item-pic" v-lazy="newItem.picUrl"/>
二遏餐、功能擴(kuò)展:
圖片懶加載的簡單效果已經(jīng)實(shí)現(xiàn)了伦腐,然后就可以按這開發(fā)文檔的api進(jìn)行擴(kuò)展了:
lazyload-api