插件名称 | lazy-load-list |
---|---|
发布时间 | 2022年2月17日 |
插件作者 | omer73364 |
用于 Vue、Svete.js 和 React.js 的轻量级和高性能延迟加载列表库。
# Yarn
$ yarn add lazy-load-list
# NPM
$ npm i lazy-load-list
1. 导入并注册延迟加载列表组件。
import LazyList from 'lazy-load-list/vue';
export default {
components: {
LazyList,
// ...
},
// ...
}
2. 为您的应用添加延迟加载列表组件。
<LazyList
:data="colors"
:itemsPerRender="15"
containerClasses="list"
defaultLoadingColor="#222"
>
<template v-slot="{item}">
<div @click="copyColor(item.hex)" class="item" :style="`background-color: ${item.hex}`">
<div class="copy">{{ item.hex }}</div>
</div>
</template>
</LazyList>
export default {
components: {
LazyList,
},
data(){
return {
// 100 items of fruits
colors,
copied:''
}
},
methods:{
copyColor(color){
window.navigator.clipboard.writeText(color)
this.showCopiedText(color)
},
showCopiedText(color){
this.copied = color
setTimeout(() => {
this.copied = ''
}, 800);
}
}
}
3.所有可用的组件道具。
data:{
type: Array,
default: () => [],
},
itemsPerRender:{
type: Number,
default: 3,
},
height:{
type: Number,
default: 480,
},
containerClasses:{
type: String,
default: '',
},
defaultLoading:{
type: Boolean,
default: true,
},
defaultLoadingColor:{
type: String,
default: '#18191A',
},