用于 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',
},