vue - 自定义指令实现select下拉列表滚动加载(1)

最新推荐文章于 2025-04-10 15:09:44 发布

Country Programmer

最新推荐文章于 2025-04-10 15:09:44 发布

阅读量2.3k

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.youkuaiyun.com/Subuprogrammer/article/details/126572380

版权

本文介绍了Vue中自定义指令的使用，通过实例展示了如何创建一个自定义指令以实现在Select下拉列表中实现滚动加载功能。文章详细说明了自定义指令的钩子函数和参数，并在实际项目中结合Vuex进行数据处理，以优化用户体验，避免因数据量大、接口请求慢导致的等待时间过长。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、vue自定义指令详解
除了内置的指令，如：v-on、v-show、v-build、v-model，vue也允许自定义指令，供我们来对底层dom元素进行操作，创建一个指令，绝不仅仅是给一个元素或者一个页面使用，而是给整个项目进行使用。
1、全局注册指令：

//该指令用来滚动加载下拉列表，用法：v-loadMore
function install(Vue, options = {}) {
  //loadMore指令名
  Vue.directive('loadMore', {
   //el绑定的dom元素，也就是使用该自定义指令的组件
    bind(el, binding) {
      //el.querySelector 返回与指定的选择器组匹配的元素的后代的第一个元素
      let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
      select_dom.addEventListener('scroll', function () {
        //监听scroll滚动事件
        let height = this.scrollHeight - this.scrollTop <= this.clientHeight;
        if (height) {
          binding.value() //指令的绑定值
        }
      })
    }
  });
}

2、一个指令定义对象可以提供如下几个钩子函数：

* bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
* inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
   ** inserted使用原理：
       1、new Vue()对象扫描到带有该自定义指令的元素，会自动调用inserted函数；
       2、new Vue()还会自动将当前指令所在的dom怨毒对象，传入inserted函数；
       3、可以在inserted函数中，为当前的dom元素执行很多的原生的dom操作。
* update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
* componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
* unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数：