vue指令做轉動加載 監聽等

2023年4月18日 91次阅读 来源: Ray_

倏忽有個人問起vue如何做轉動監聽?

既然你誠心實意的發問了, 我就大發慈悲的通知你.(武藏 & 小次郎)

指令能夠很好的做這件事變, 下面以element-select舉例:
directives.js

// v-loadmore: 用於在element-ui的select下拉框加上轉動究竟事宜監聽
Vue.directive('loadmore', {
    bind(el, binding) {
      
      // 獵取element-ui定義好的scroll盒子
      const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    
      SELECTWRAP_DOM.addEventListener('scroll', function() {

          /*
           * scrollHeight 獵取元素內容高度(只讀)
           * scrollTop 獵取或許設置元素的偏移值,常用於, 盤算轉動條的位置, 當一個元素的容器沒有發生垂直方向的轉動條, 那它的scrollTop的值默以為0.
           * clientHeight 讀取元素的可見高度(只讀)
           * 假如元素轉動究竟, 下面等式返回true, 沒有則返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
          
          if(CONDITION) {
              binding.value();
          }
      });
    }
})

組件中:

<template>
    <el-select 
        v-model="selectValue" 
        v-loadmore="loadMore">
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.accountName"
            :value="item.id">
        </el-option>
    </el-select>
</template>

// methods
loadMore() {
    // 這裡能夠做你想做的任何事 究竟實行
},
    原文作者：Ray_
    原文地址: https://segmentfault.com/a/1190000014972548
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞