@mosowe2/ui：【InventedList】虚拟列表

虚拟滚动列表，每一项的高度时根据第一项定的 attr

event

slot

使用方法

安装

npm i @mosowe2/ui

配置

main.js配置，因为是依赖@vue/composition-api，所以这个也是要安装和配置的

import Vue from vue;
import VueCompositionApi from @vue/composition-api;
import App from ./App.vue;
import router from ./router;
import mosoweUI from @mosowe2/ui  // 引入


Vue.config.productionTip = false;
Vue.config.silent = true;
Vue.use(VueCompositionApi);
Vue.use(mosoweUI) // 配置

new Vue({
          
   
  router,
  render: (h) => h(App),
}).$mount(#app);

使用

.vue文件中直接使用

<div class="test">
    <div
      ref="InventedList"
      style="
        width: 500px;
        height: 300px;
        overflow-y: scroll;
        margin-bottom: 100px;
      "
    >
      <inventedList :listData="listData" :instance="InventedList" row-key="id">
        <template #default="{ listItem }">
          <div class="item" style="height: 50px">{
         
  { listItem }}</div>
        </template>
      </inventedList>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "@vue/composition-api";
export default defineComponent({
  components: {},
  setup() {
    // 虚拟列表
    const InventedList = ref(null);
    const createList = () => {
      const list = [];
      for (let i = 0; i < 100; i++) {
        list.push({
          name: "test",
          id: i,
        });
      }
      return list;
    };
    const listData = ref(createList());

    return {
      InventedList,
      listData,
    };
  },
});
</script>