Element Plus 相关

286 阅读1分钟

1.drawer里不能滚动 解决方案:

<el-drawer
      v-model="warehouseDrawer"
      custom-class="warehouse-drawer-wraper"
      title="已入库货品"
      size="640"
      :append-to-body="true"
    >
    <div class="fill">
      <DrawerWarehouse></DrawerWarehouse>
    <div>
</el-drawer>



//css
.fill {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.warehouse-drawer-wraper {
  .el-drawer {
    outline: none;

    &__body {
      height: 100%;
      overflow: hidden;
    }
  }
}


2.el-scrollbar组件判断滚动到底部 执行加载更多

<div class="scroll-view">
  <el-scrollbar @scroll="onScroll">
    <div class="scroll-body">
       <template v-for="(item, index) in resList" :key="item.id">
         
       </template>
    </div>
  </el-scrollbar>
</div>


const onScroll = (e) => {
  const el = document.getElementsByClassName('scroll-body')[0];
  const elView = document.getElementsByClassName('scroll-view')[0];
  if (el && elView) {
    const windowHeight = elView.clientHeight;
    const scrollTop = e.scrollTop;
    const bodyScrollHeight = el.scrollHeight;
    if (scrollTop + windowHeight >= bodyScrollHeight - 5) {
      loadMore();
    }
  }
};