vue 根据窗口宽度改变UI组件

npm i lodash

layout.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
import _ from 'lodash'

const { body } = document
const WIDTH = 992 // refer to Bootstrap's responsive design

export default {
  name: 'layout',
  mounted() {
    window.addEventListener('resize', this.onWindowResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.onWindowResize)
  },
  methods: {
    isMobile() {
      const rect = body.getBoundingClientRect()
      return rect.width - 1 < WIDTH
    },
    resizeHandler() {
      if (!document.hidden) {
        const isMobile = this.isMobile()
        this.$store.dispatch('toggleDevice', isMobile ? 'mobile' : 'desktop')
      }
    },
    onWindowResize: _.debounce(function() {
      this.resizeHandler()
    }, 400) // delay 100ms between resize events
  }
}
</script>

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    device: 'desktop',
  },

  mutations: {
    TOGGLE_DEVICE: (state, device) => {
      state.device = device
    },
  },
  actions: {
    toggleDevice({
      commit
    }, device) {
      commit('TOGGLE_DEVICE', device)
    },
  },
})

vue 根据窗口宽度改变UI组件

debounce & throttling

vue 根据窗口宽度改变UI组件

参考链接