element 下拉选项层级过高问题

忘是亡心i 2022-11-21 01:04 336阅读 0赞

## element ui下拉选项层级过高遮挡面包屑与head头问题解决 ##

#### **问题:** ####

**vue+element项目,下拉选择组件页面滚动时层级过高遮挡面包屑与head头**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R1anlvbmc_size_16_color_FFFFFF_t_70_pic_center]

#### **解决:** ####

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

1.  在utils文件夹定义工具js:

let lock = true
    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
        }
    }

1.  在页面内引入:

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

**注意!!**  
下拉框选择组件的 `:popper-append-to-body="false"` 与上面js文件有冲突,不可同时使用

**ok,解决!**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R1anlvbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/5ea58a3c07ff4e20b4e78d197dc706d7.png