el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题

问题:el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题

 

# 解决:曲线救国,当页面滚动时,将所有下拉框关闭,就不会遮到顶部了

在utils文件夹定义工具js文件elselectJs:

let el = null
// const MousedownEvent = new Event('mousedown', { bubbles: true })
// const MouseupEvent = new Event('mouseup', { bubbles: true })
const MousedownEvent = document.createEvent('Events')
MousedownEvent.initEvent('mousedown', true, true)
const MouseupEvent = document.createEvent('Events')
MouseupEvent.initEvent('mouseup', true, true)
const fakeClickOutSide = () => {
    document.dispatchEvent(MousedownEvent)
    document.dispatchEvent(MouseupEvent)
    lock = true // console.log('dispatchEvent');
}
const mousedownHandle = e => {
    const classList = e.target.classList
    if (classList.contains('el-select__caret') || classList.contains('el-input__inner') || classList.contains('el-select__tags')) {
        lock = false
        return
    }
    if (lock) return
    fakeClickOutSide()
}
const mousewheelHandle = e => {
    if (lock || e.target.classList.contains('el-select-dropdown__item') || e.target.parentNode.classList.contains('el-select-dropdown__item')) return
    fakeClickOutSide()
}
const eventListener = (type) => {
    el[type + 'EventListener']('mousedown', mousedownHandle)
    window[type + 'EventListener']('mousewheel', mousewheelHandle)
    window[type + 'EventListener']('DOMMouseScroll', mousewheelHandle) // fireFox 3.5+
}
export default {
    mounted() {
        el = this.$root.$el
        el.addFakeClickOutSideEventCount = el.addFakeClickOutSideEventCount || 0;
        (!el.addFakeClickOutSideEventCount) && this.$nextTick(() => {
            eventListener('add')
        })
        el.addFakeClickOutSideEventCount += 1
    },
    destroyed() {
        eventListener('remove')
        el.addFakeClickOutSideEventCount -= 1
    }
}
在页面中引入:

import elselectJs from '@/utils/elselectJs'
export default { 
mixins: [elselectJs]
}

需要注意的是:

下拉框选择组件的 :popper-append-to-body=“false” 与上面js文件有冲突,不可同时使用