界面响应式

1.封装

//-- media-query.js
const Breakpoints = {
 XSmall: "(max-width: 699.99px)",
 Small: "(min-width: 700px) and (max-width: 959.99px)",
 Medium: "(min-width: 960px) and (max-width: 1279.99px)",
 Large: "(min-width: 1280px)",
}

let handlers = []
const xSmallMedia = window.matchMedia(Breakpoints.XSmall)
const smallMedia = window.matchMedia(Breakpoints.Small)
const mediumMedia = window.matchMedia(Breakpoints.Medium)
const largeMedia = window.matchMedia(Breakpoints.Large)

;[xSmallMedia, smallMedia, mediumMedia, largeMedia].forEach(media => {
 media.addListener(() => {
   handlers.forEach(handler => handler())
 })
})

export const sizes = () => {
 return {
   "screen-x-small": xSmallMedia.matches,
   "screen-small": smallMedia.matches,
   "screen-medium": mediumMedia.matches,
   "screen-large": largeMedia.matches,
 }
}

export const subscribe = handler => handlers.push(handler)

export const unsubscribe = handler => {
 handlers = handlers.filter(item => item !== handler)
}

2.使用

<template>
  <div class="wrap">

  </div>
</template>

<script>
import { sizes, subscribe, unsubscribe } from "@/utils/media-query"
function getScreenSizeInfo() {
  const screenSizes = sizes()
  return {
    isXSmall: screenSizes["screen-x-small"],
    isLarge: screenSizes["screen-large"],
    cssClasses: Object.keys(screenSizes).filter(cl =>screenSizes[cl]),
  }
}
export default {
  name: "Layout",
  data() {
    return {
      screen: getScreenSizeInfo(),
    }
  },
  methods: {
    screenSizeChanged() {
      this.screen = getScreenSizeInfo()
      this.$store.commit("setScreenSize", this.screen)
    },
  },
  watch: {
    screen: {
      handler(val) {
        // 存在store中并持久化
        this.$store.commit("setScreenSize", val)
      },
      immediate: true,
    },
  },
  mounted() {
    subscribe(this.screenSizeChanged)
  },
  beforeDestroy() {
    unsubscribe(this.screenSizeChanged)
  },
}
</script>

<style lang="scss" scoped>
</style>