Element-ui中 元素滚动时el-option超出元素区域的问题

168 阅读1分钟

src/mixins/drawdownBeyondShadowHide.js

// src/mixins/drawdownBeyondShadowHide
// https://blog.csdn.net/weixin_30404405/article/details/100092533
let lock = true;
let el = null;
const MousedownEvent = new Event('mousedown', { bubbles: true });
const MouseupEvent = new Event('mouseup', { bubbles: true });
const fakeClickOutSide = () => {
    document.dispatchEvent(MousedownEvent);
    document.dispatchEvent(MouseupEvent);
    lock = true; // console.log('dispatchEvent');
};
const mousedownHandle = e => {
    let classList = e.target.classList;
    if (classList.contains('el-select__caret') || classList.contains('el-input__inner')) {
        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;
    },
}

App.vue

import drawdownBeyondShadowHide from '@/mixins/drawdownBeyondShadowHide.js'
export default {
  name: "App",
  mixins: [drawdownBeyondShadowHide],
  methods: {
    
  },
  created() {
  
  },
};