Vue大屏自适应--响应式盒子

Vue大屏项目自适应--响应式盒子

一、获取当前浏览器可视窗口宽高

1、在Vue项目 src文件夹内新建 utils文件夹=>index.js。

utils

2、在utils文件夹内的index.js内获取可视窗口宽高

let Util = {};
export default Util;
/**
 * @description: 获取页面宽度
 * @param {type}
 * @return {Number} 页面可视窗口宽度
 */
Util.getPageWidth = () => {
  // 页面可视窗口宽度
  let pageWidth = document.documentElement.clientWidth;
  // 页面可视窗口最小宽度
  pageWidth = pageWidth < 1280 ? 1280 : pageWidth;
  return pageWidth;
};
/**
 * @description: 获取页面高度
 * @param {type}
 * @return {Number} 页面可视窗口高度
 */
Util.getPageHeight = () => {
  // 页面可视窗口高度
  let pageHeight = document.documentElement.clientHeight;
  // 页面可视窗口最小高度
  pageHeight = pageHeight < 720 ? 720 : pageHeight;
  return pageHeight;
};

二、将当前浏览器可视窗口宽高存储到Vuex仓库中

store仓库设置

1、在store仓库中创建自定义模块 modules

store modules

2、配置仓库
在modules文件夹内的model.js文件内引入Util文件
存储页面宽高及配置修改页面宽高函数

import Util from "@/utils";

const customModule = {
  state: {
    // 当前页面宽度
    pageWidth: Util.getPageWidth(),
    // 当前页面高度
    pageHeight: Util.getPageHeight(),
  },
  mutations: {
    //   更改页面宽度
    setPageWidth: (state) => {
      state.pageWidth = Util.getPageWidth();
    },
    //   更改页面高度
    setPageHeight: (state) => {
      state.pageHeight = Util.getPageHeight();
    },
  },
  actions: {
    // 修改页面宽度
    changePageWidth({ commit }) {
      commit("setPageWidth");
    },
    // 修改页面高度
    changePageHegiht({ commit }) {
      commit("setPageHeight");
    },
  },
};

export default customModule;

3、在index.js文件内引入自定义模块

import Vue from "vue";
import Vuex from "vuex";
// 自定义模块
import customModule from "./modules/model";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    customModule,
  },
});
export default store;

三、在main.js文件内监听

main.js 配置 window.onresize 修改页面宽高

window.onresize = () => {
  store.dispatch("changePageWidth");
  store.dispatch("changePageHegiht");
};

四、创建响应式盒子组件