vue3笔记（11）加载更多

业务需求，下拉列表点击“加载更多”请求下一页数据。
加载返回数据太多时，会造成卡顿，因此需要一个滚动加载的方法。

自定义指令

在Vue中，代码复用和抽象的主要形式是组件。然而，有的情况下仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。
自定义指令是Vue提供给我们用原生DOM封装一系列DOM相关功能、视图变化的一个接口(API)。

实现

在main.ts中定义一个指令，用于内容的插入。

// 滚动加载更多
Vue.directive('loadMore', (el,binding,vNode,prevNode)=> {
  // bind(el, binding) {
    // 获取element，定义scroll
    let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    select_dom.addEventListener('scroll', function () {
      let height = this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (height) {
        binding.value()
      }
    })
  // }
});

<template>
  <el-form-item label="">
    <el-select
      v-loadMore="loadMore">
        <el-option
          v-for="item in list"
          :key="item.id"
          :label="item.name"
          :value="item.value">
         </el-option>
     </el-select>
  </el-form-item>
</template>
<script lang="ts">
export default defineComponent({
  name: "Setting",
  directives: {
    loadMore,
  },
  setup() {  
    const getData = () => {
      // API 
    }
    
    const loadMore = () => {
      getData();
    }

    return {
      loadMore,
    }
  }
});
</script>

问题解决

1. el.querySelector找不到元素，只有el-select，没有找到el-option。
   原因：el-option不在el-select元素的范围内。
   解决方案：换成document.querySelector

2. 监听器没有执行，是没有绑定上？？？，或者是有多个，，多个怎么操作