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

本文介绍了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:只调用一次,指令与元素解绑时调用。

钩子函数参数:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值