#献祭上美照,吸引流量
描述:项目中老板突发奇想,要求做个能滑动到底就自动加载一些数据的选择控件,看了很多教程,结果都失败了。原因竟是我使用的element使用的是新版的,而新版的elem在模态框组件的展示时使用了<teleport to="body"><div></div></teleport>,导致querySelector获取dom操作失败。所以,改用document操作即可从全局获取到dom元素。
dom结构如图:(被传送到<body>下)
解决方案:
template代码:
<el-select ref="dom" value="fri">
<el-option v-for="(item,index) in arr" :key="index"
:value="item.type" :label="item.name"></el-option>
</el-select>
js代码:
mounted(){
// vue3中方式
let dom = document.querySelectorAll(".el-select-dropdown")[0].querySelector('.el-scrollbar__wrap');
dom.addEventListener('mousewheel', function () {
if(this.scrollTop + this.clientHeight>=this.scrollHeight){
console.log("chu di jia zai!")
}
})
}