element ui下拉选项层级过高遮挡面包屑与head头问题解决
问题:
vue+element项目,下拉选择组件页面滚动时层级过高遮挡面包屑与head头
解决:
曲线救国,当页面滚动时,将所有下拉框关闭,就不会遮到顶部了~~
- 在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
}
}
- 在页面内引入:
import fackClickOutSide from '@/utils/fackClickOutSide'
export default {
mixins: [fackClickOutSide],
}
注意!!
下拉框选择组件的 :popper-append-to-body="false"
与上面js文件有冲突,不可同时使用
ok,解决!