vue如何让一个div占满全屏_如何编写一个 vue 指令

今天碰到需要表格滚动加载的功能，表格拉到底部加载更多，表格是第二次封装element-ui的表格，可以通过 height 属性固定表格的表头。

本文通过学习以下文章

实现一个简单的 vue 无限加载指令www.jianshu.com

Vue.directive("load-more", {
  bind(el, binding, vnode) {
    let throttle = (after, wait) => {
      /*option说明：after [回调函数]; 
                      wait  [周期性执行回调间隔时间ms]
        */
      var timer
      var isScroll //是否正在执行回调
      return function() {
        if (isScroll) return //在回调函数未执行完以前
        isScroll = true
        timer && clearTimeout(timer)
        timer = setTimeout(function() {
          after && after()
          isScroll = false
          timer = null
        }, wait)
      }
    }
    let self = this
    let mainWrap = document.querySelector(".main-wrapper")
    mainWrap.style.cssText = "overflow-y: scroll;"
    mainWrap.addEventListener('scroll', throttle(function() {
      let clientHeight = mainWrap.clientHeight
      let scrollTop = mainWrap.scrollTop
      // let offsetTop =  
      let scrollHeight = mainWrap.scrollHeight
      console.log("aaaaa", clientHeight, scrollTop, scrollHeight)
      console.log(binding)
      binding.value()
    }, 2000))
  }
})

基本上还没写完，这种方式被自己否定了，因为总感觉是有问题的，所以就没有继续写下去了

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_39789206/article/details/112205275
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-28 22:30:50
阅读 ( 428 )
分类：前端

vue如何让一个div占满全屏_如何编写一个 vue 指令

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看