vue3创建自定义指令并全局注册

1.封装一个下拉框懒加载指令

export default {
  mounted(el,binding){
    let SELECT_DOM = el.querySelector(
      ".el-select-dropdown .el-select-dropdown__wrap"
    );
    SELECT_DOM.addEventListener("scroll", function () {
      let condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (condition) {
        binding.value();
      }
    });
  }
}
vue3创建自定义指令并全局注册_第1张图片

2.在index.js引入

import lazyLoading from '../../directive/module/lazyLoading.js'

const directives = { // 指令对象
  lazyLoading
}

export default {
  install(app) {
    Object.keys(directives).forEach((key) => {
      app.directive(key, directives[key])
    });
  }
}
vue3创建自定义指令并全局注册_第2张图片

3.在main.js引入

vue3创建自定义指令并全局注册_第3张图片

ok

你可能感兴趣的:(vue.js,前端,javascript)