vue+element 页面 滚动隐藏select下拉框

封装的滚动事件 

 // 滚轮事件的监听于移除并返回当前滚轮滚动方向,取消监听执行scrollFunc第二个参数

export function scrollEven (scrollFunc) {

  // 火狐浏览器

  // if (document.addEventListener) {

  let isRemove = false

  document.addEventListener('DOMMouseScroll', scroll, false)

  // }// W3C

  document.addEventListener('mousewheel', scroll, false)// IE/Opera/Chrome/Safari

  function scroll (e) {

    // direct 是 1 向上，是 -1 向下

    var direct = 0

    e = e || window.event

    if (e.wheelDelta) {//IE/Opera/Chrome

      direct = e.wheelDelta > 0 ? 1 : -1

    } else if (e.detail) {//Firefox

      direct = e.detail < 0 ? 1 : -1

    }

    if (isRemove) {

      document.removeEventListener('DOMMouseScroll', scroll, false)

      document.removeEventListener('mousewheel', scroll, false)// IE/Opera/Chrome/Safari

    }

    scrollFunc(direct, removeScroll, e)

  }

  function removeScroll () {

    isRemove = true

  }

}

 

调用 

<el-select ref="mySelect" ></el-select>

 

import { scrollEven } from '@/utils/event.js'

 mounted () {

      // 监听滚动

      scrollEven((direct, removeScroll, event) => {

        this.removeHandleScroll = removeScroll

        this.handleScroll(direct, event)

      })

    },

    destroyed () {

      // 监听滚动

      this.removeHandleScroll()

    },

    methods: {

      // 滚动时关闭下拉框

      removeHandleScroll () { },

      handleScroll (direct, event) {

        if (!event.target.className.includes('el-select-dropdown__item')) {

          this.$refs.mySelect.blur()

        }

      },

   }