vue2.x mixin 监听浏览器窗口大小事件

用于实时监听浏览器窗口大小来改变全局变量，以达到自适应的效果

 

import { mapActions } from 'vuex'
import { throttle } from '@/utils'
export default {
  data () {
    return {
      handler: () => {},
      win: null
    }
  },
  mounted () {
    this.win = window
    this.resize()
    this.handler = throttle(this.resize, 300)
    this.win.addEventListener('resize', this.handler)
  },
  methods: {
    ...mapActions(['setScale']),
    resize () {
      let scale = this.win.innerWidth / this.win.__BASE_WIDTH__
      // 该判断用于处理点击f11全屏后scale不变导致watch不到scale变化的问题
      scale === this.win.scale && (scale += 0.00001)
      this.win.scale = scale
      this.setScale(scale)
    }
  },
  beforeDestroy () {
    this.win.removeEventListener('resize', this.handler)
  }
}