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");
};

四、创建响应式盒子组件

<template>
  <div :style="boxStyle" @click="clickFunction">
    <slot></slot>
  </div>
</template>

<script>
/**
  @description 响应式盒子
  @augments wh: 盒子宽高(auto：100%,"height:'width'":强制宽高一致)
  @augments mg: 盒子外边距
  @augments pd: 盒子内边距
  @augments psn: 定位
  @augments ps: 定位边距
  @augments ratio:  等比例（根据宽计算高）
  @demo <auto-view :wh=[150,50] :psn="absolute" :ps="[50,0,0,0]"></auto-view>
 */
export default {
  name: "viewAuto",
  props: {
    //   宽高
    wh: {
      type: Array,
      default: () => [],
    },
    // 内边距
    pd: {
      type: Array,
      default: () => [],
    },
    // 外边距
    mg: {
      type: Array,
      default: () => [],
    },
    // 定位模式
    psn: {
      type: String,
      default: "static",
    },
    // 定位距离
    ps: {
      type: Array,
      default: () => [],
    },
    // 等比例（根据宽计算高）
    ratio: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    /**
     * @description: 响应盒子样式  计算属性
     * @param {type}
     * @return {string}响应盒子样式
     */
    boxStyle() {
      let pageWidth = this.$store.state.customModule.pageWidth; // 当前屏幕宽度
      let pageHeight = this.$store.state.customModule.pageHeight; // 当前屏幕高度
      let ratio_w = pageWidth / 1920; // 宽度缩放比
      let ratio_h = pageHeight / 1080; //高度缩放比
      let style = {};
      // 根据比例设置box宽高
      if (this.wh[0]) {
        if (this.wh[0] == "auto") {
          style.width = "100%";
        } else {
          style.width = ratio_w * this.wh[0] + "px";
        }
      }
      if (this.ratio !== 0) {
        style.height = this.ratio * ratio_w * this.wh[0] + "px";
      } else {
        if (this.wh[1]) {
          if (this.wh[1] == "auto") {
            style.height = "100%";
          } else if (this.wh[1] == "width") {
            style.height = ratio_w * this.wh[0] + "px";
          } else {
            style.height = ratio_h * this.wh[1] + "px";
          }
        }
      }

      // 根据比例设置box外边距
      if (this.mg.length > 0) {
        style["margin-top"] = ratio_h * this.mg[0] + "px";
        style["margin-right"] = ratio_w * this.mg[1] + "px";
        style["margin-bottom"] = ratio_h * this.mg[2] + "px";
        style["margin-left"] = ratio_w * this.mg[3] + "px";
      }

      // 根据比例设置box内边距
      if (this.pd.length > 0) {
        style["padding-top"] = ratio_h * this.pd[0] + "px";
        style["padding-right"] = ratio_w * this.pd[1] + "px";
        style["padding-bottom"] = ratio_h * this.pd[2] + "px";
        style["padding-left"] = ratio_w * this.pd[3] + "px";
      }

      // 根据比例设置box定位
      if (this.psn != "static") {
        style["position"] = this.psn;
        if (this.ps[0] != 0) {
          style["top"] = ratio_h * this.ps[0] + "px";
        }
        if (this.ps[1] != 0) {
          style["right"] = ratio_w * this.ps[1] + "px";
        }
        if (this.ps[2] != 0) {
          style["bottom"] = ratio_h * this.ps[2] + "px";
        }

        if (this.ps[3] != 0) {
          style["left"] = ratio_w * this.ps[3] + "px";
        }
      }

      return style;
    },
  },
  methods: {
    /**
     * @description: 响应式盒子点击事件
     * @param {type}
     * @return {type}
     */
    clickFunction() {
      this.$emit("click");
    },
  },
};
</script>

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