vue3监听屏幕变化

这里需要自己安装一个插件lodash，只做记录，[不过多讲解]

import _ from 'lodash'
import { useCommonStore } from '@/store/commonStore'

export const useResize = () => {
  function setResizeVal() {
    const clientW = document.documentElement.clientWidth || document.body.clientWidth
    const clientH = document.documentElement.clientHeight || document.body.clientHeight
    const commonStore = useCommonStore()
    commonStore.resizeVal = clientW + '*' + clientH
  }

  const resetResizeVal = _.debounce(setResizeVal, 120)

  // orientationchange->手机屏幕转屏事件
  // resize->页面大小改变事件(兼容pc，移动端)
  let reEvt = 'resize'
  reEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  window.addEventListener(reEvt, resetResizeVal)
  // DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行
  // document.addEventListener('DOMContentLoaded', this.setResizeVal)
  // 直接执行获取fontSize，否则组件渲染时，fontSize依然为0，计算时除数为0会计算错误。 hzh：2020年10月21日18:14:09
  setResizeVal()

  onUnmounted(function () {
    resetResizeVal.cancel()
    window.removeEventListener(reEvt, resetResizeVal)
  })
}

以下是store.ts,可以选择自己需要的参数保存

import { defineStore } from 'pinia'

export const useCommonStore = defineStore('commonStore', {
  state: () => {
    return {
      isRefresh: <boolean>true, // 保存是否刷新过浏览器
      language: <string>'zh',
      isFullScreen: <boolean>false,
      colorName: <string>'#409EFF',
      themeName: <string>'theme-default',
      resizeVal: <string>'0*0' // 视窗的宽高，当改变浏览器大小时会触发变化
    }
  },
  // 数据持久化设置
  persist: {
    enabled: true,
    strategies: [
      { storage: localStorage, paths: ['language', 'colorName', 'themeName'] } // 本地存储
      // { storage: sessionStorage, paths: [] } // 会话存储
    ]
  },
  actions: {}
})

缩放组件

可以使用别人写好的组件，直接安装使用，里面包含vue2/vue3的缩放组件 传送门