先说一下.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'
}
