解决鼠标滚动时element-ui日期选择器错位的问题

解决方案：监听鼠标滚动事件，在鼠标滚动时隐藏element-ui日期选择器下拉框

1、先在util文件夹下创建个hidePicker.js文件，代码如下：

let el = null

const fakeClickOutSide = () => {
  const SELECTWRAP_BODY = document.body // body
  // const SELECTWRAP_DOWNALL = document.querySelectorAll('.el-select-dropdown') // select下拉框
  const SELECTWRAP_TIMEALL = document.querySelectorAll('.el-time-panel') // 时间下拉框
  const SELECTWRAP_DATEALL = document.querySelectorAll('.el-picker-panel') // 日期下拉框
  SELECTWRAP_BODY.click()
  // SELECTWRAP_DOWNALL.forEach((item) => {
  //   item.style.display = 'none'
  // })
  SELECTWRAP_TIMEALL.forEach((item) => {
    item.style.display = 'none'
  })
  SELECTWRAP_DATEALL.forEach((item) => {
    item.style.display = 'none'
  })
  const MousedownEvent = document.createEvent('Events')
  MousedownEvent.initEvent('mousedown', true, true)
  const MouseupEvent = document.createEvent('Events')
  MouseupEvent.initEvent('mouseup', true, true)
  document.dispatchEvent(MousedownEvent)
  document.dispatchEvent(MouseupEvent)

}


const mousedownHandle = e => {
  fakeClickOutSide()
}
const mousewheelHandle = e => {
  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
  }
}

2、在需要使用的页面引入，然后注入到mixins中

import hidePicker from '@/util/hidePicker'

export default {
  mixins: [hidePicker],
  name: "",
  data() {
    return {

    }
  },
  created() {
  },
  mounted() {
    
  },
  methods: {
    
  }

}