解决级联选择器滚动下拉框分离问题

先说一下.addEventListener(“事件”,函数处理,布尔类型)
第一个参数是事件的类型(比如 “click” 或 “mousedown”)。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。
默认值是 false,将使用冒泡传播,如果该值设置为 true,则事件使用捕获传播

mounted () {//给window添加一个滚动滚动监听事件
window.addEventListener('scroll', this.handleScroll, true)
},

methods: {
handleScroll () { //改变元素#searchBar的top值
let top = this.$refs.newConBox.$el.getBoundingClientRect().top
// 或者通过id获取 document.querySelector('#box').getBoundingClientRect().top
}
},
destroyed () {//离开该页面需要移除这个监听的事件
window.removeEventListener('scroll', this.handleScroll, true)
}

我使用这个监听是修复级联选择器滚动时,弹窗内容分离问题
解决方法是:
在 cascader组件中,添加 popper-class="cascaderClass" 添加了一个类名,即级联选择器下拉框的类名

handleScroll () { //改变元素#searchBar的top值
// box.clientHeight为输入框的高度
let top = this.$refs.newConBox.$el.getBoundingClientRect().top + box.clientHeight
// 或者通过id获取 document.querySelector('#box').getBoundingClientRect().top
let cascaderClass = document.querySelector('.cascaderClass')
cascaderClass.style.top = offsetTop + 'px'
}

原文地址:https://www.cnblogs.com/hellofangfang/p/14838491.html