element-ui directive

npm i element-ui-directive

import directives from "element-ui-directive";
Object.keys(directives).forEach((key) => {
  Vue.directive(key, directives[key])
})

// or

Vue.directive("popupscroll", directives.popupscroll);

directive list

• popupscroll el-select 下拉列表滚动时的回调

popupscroll

popper-append-to-body 需要设置 false，否则找不到 dom

使用

触底事件示例

可视滚动区域高度的 30%，比如：270px，距离底部小于81px时触发事件

<el-select v-popupscroll="scroll" :popper-append-to-body="false">

export default{
  methods:{
    scroll(){
      // loading more
    }
  }
}

触底事件配置

距离底部小于 20px 触发

<el-select v-popupscroll="scroll" :popper-append-to-body="false" data-scrollvalue="20">

距离底部小于可视滚动区域高度的 20% 触发，默认 30%

<el-select v-popupscroll="scroll" :popper-append-to-body="false" data-scrollvalue="20%">

自定义滚动(配置 data-scroll 后,设置的 data-scrollvalue 不会生效)

<el-select v-popupscroll="scroll" data-scroll :popper-append-to-body="false">

export default{
  methods:{
    scroll(event){
      console.log(event.target.scrollTop)
    }
  }
}

开发调试环境

1.0.0

{
  "dependencies": {
    "element-ui": "^2.15.8",
    "vue": "^2.6.11"
  }
}

打赏

• 您有任何意见或建议，请联系 [email protected]