前言

开发过大屏的铁汁们应该知道，前期最头疼的就是大屏适配，由于大屏项目需要在市面上不是很常见的显示器上进行展示，所以要根据不同的尺寸进行适配，今天我将为大家分享的我使用的大屏适配方案，话不多说，直接上效果图。

效果图

上面所展示的只是其中一种模式，其中一共有四种模式，分别为1-居中留白(按比例伸缩);、2-居中留白(若不超出屏则不拉伸);、3-窄边铺满(长边滚动)、4-铺满全屏。

准备工作

首先，我们需要把使用到的依赖进行安装：

npm i element-resize-detector

npm i animejs

npm i jquery

然后，在vuex中定义以下变量和方法：

 state: {
    mode: 1, //1-居中留白(按比例伸缩); 2-居中留白(若不超出屏则不拉伸); 3-窄边铺满(长边滚动); 4-铺满全屏
    exw: 40,
    left: 0,
    top: 0,
    orderWork: {},
    warn: {},
    fontSize: 30,
  },
mutations: {
    increment(state, fs) {
      state.fontSize = fs;
    },
    exMode(state, mode) {
      state.mode = mode;
    },
    addExW(state, exw) {
      state.exw = exw;
    },
    addLeft(state, left) {
      state.left = left;
    },
    addTop(state, top) {
      state.top = top;
    },
  },

最后，需要在main.js中定义我们需要用到的全局方法：

// 以下为vue3的写法
import ElementResizeDetectorMaker from "element-resize-detector";
import anime from "animejs";
import jquery from "jquery";

const app = createApp(App);

app.config.globalProperties.$erd = ElementResizeDetectorMaker();
app.config.globalProperties.$anime = anime;
app.config.globalProperties.$jquery = jquery;

app.use(store).use(router).use(ElementPlus).mount("#app");


// 以下为vue2的写法
import Vue from 'vue'
import ElementResizeDetectorMaker from "element-resize-detector";
import anime from "animejs";
import jquery from "jquery";

Vue.prototype.$erd = ElementResizeDetectorMaker();
Vue.prototype.$anime = anime;
Vue.prototype.$jquery = $jquery;

实现

在App.vue中书写以下代码：

<template>
  <div id="app" :style="{ padding: pad }" class="hidden">
    <div ref="appBox" class="app-box" :style="{ width: tw, height: th }">
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pad: "0",
      w: 4160,
      h: 1248,
      fs: 30, //基本字体大小
      tw: "100%",
      th: "100%",
      speed: 2,
      ani: null,
    };
  },
  created() {},
  computed: {
    mode() {
      return this.$store.state.mode;
    },
  },
  watch: {
    mode() {
      this.$jquery(this.$refs.appBox).css("transform", "none");
      this.calc();
    },
  },
  mounted() {
    this.calc();
    this.$nextTick(() => {
      document.addEventListener("keydown", (e) => this.turnMode(e), true);
      this.$erd.listenTo(document.querySelector("html"), () => {
        this.$jquery(this.$refs.appBox).css("transform", "none");
        this.calc();
      });

      this.$store.commit("addExW", this.$jquery(this.$refs.ex).outerWidth());
    });
  },
  methods: {
    calc: function () {
      let fs = this.fs;
      let html = document.querySelector("html");
      let sc = this.w / this.h;
      let ww = parseFloat(
        document.defaultView.getComputedStyle(html, null).width
      );
      let wh = parseFloat(
        document.defaultView.getComputedStyle(html, null).height
      );
      if (this.mode <= 2) {
        let isEnough = this.h <= wh && this.w <= ww && this.mode == 2;
        if (isEnough) {
          this.pad = wh / 2 - this.h / 2 + "px " + (ww / 2 - this.w / 2) + "px";
        } else {
          if (sc < ww / wh) {
            this.pad = "0 " + (ww / 2 - (wh * sc) / 2) + "px";
            fs = (wh * fs) / this.h;
          } else {
            this.pad = wh / 2 - ww / sc / 2 + "px 0";
            fs = (ww * fs) / this.w;
          }
        }
        this.tw = "100%";
        this.th = "100%";

        this.$store.commit(
          "addLeft",
          isEnough
            ? ww / 2 - this.w / 2
            : sc < ww / wh
            ? ww / 2 - (wh * sc) / 2
            : 0
        );
        this.$store.commit(
          "addTop",
          isEnough
            ? wh / 2 - this.h / 2
            : sc < ww / wh
            ? 0
            : wh / 2 - ww / sc / 2
        );
      } else if (this.mode == 3) {
        this.pad = "0";
        if (sc < ww / wh) {
          this.tw = ww + "px";
          this.th = ww / sc + "px";
          fs = (ww * fs) / this.w;
          this.$nextTick(() => {
            document.removeEventListener(
              "keydown",
              (e) => this.trans(e, 1),
              true
            );
            document.addEventListener("keydown", (e) => this.trans(e, 1), true);
            this.mouseWheel(
              this.$refs.appBox,
              () => this.trans({ keyCode: 38 }, 1, 240),
              () => this.trans({ keyCode: 40 }, 1, 240)
            );
          });
        } else {
          this.tw = wh * sc + "px";
          this.th = wh + "px";
          fs = (wh * fs) / this.h;
          this.$nextTick(() => {
            document.removeEventListener(
              "keydown",
              (e) => this.trans(e, 0),
              true
            );
            document.addEventListener("keydown", (e) => this.trans(e, 0), true);
            this.mouseWheel(
              this.$refs.appBox,
              () => this.trans({ keyCode: 37 }, 0, 240),
              () => this.trans({ keyCode: 39 }, 0, 240)
            );
          });
        }

        this.$store.commit("addLeft", 0);
        this.$store.commit("addTop", 0);
      } else if (this.mode == 4) {
        this.pad = "0";
        this.tw = "100%";
        this.th = "100%";
        fs = sc < ww / wh ? (wh * fs) / this.h : (ww * fs) / this.w;

        this.$store.commit("addLeft", 0);
        this.$store.commit("addTop", 0);
      }
      html.style["font-size"] = parseInt(fs) + "px";
      this.$store.commit("increment", fs);
    },
    trans: function (e, s, st) {
      let ts = s
        ? this.$jquery(this.$refs.appBox).outerHeight()
        : this.$jquery(this.$refs.appBox).outerWidth();
      let ws = s
        ? this.$jquery(this.$refs.appBox).parent().outerHeight()
        : this.$jquery(this.$refs.appBox).parent().outerWidth();
      let event = e || window.event;
      let code = event.keyCode || event.which;
      let of = parseFloat(
        this.$jquery(this.$refs.appBox).css("transform")
          ? this.$jquery(this.$refs.appBox).css("transform").split(",")[
              s ? 5 : 4
            ] || 0
          : 0
      );
      let step = st || 120;
      if (code == (s ? 38 : 37) && of < 0) {
        let m = of + step > 0 ? 0 : of + step;
        this.run(this.$refs.appBox, s, m - of);
      } else if (code == (s ? 40 : 39) && ts + of - ws > 0) {
        let m = ts + (of - step) - ws > 0 ? of - step : ws - ts;
        this.run(this.$refs.appBox, s, m - of);
      }
      return false;
    },
    run: function (el, s, dis) {
      this.$anime.remove(el);
      this.ani = null;
      let obj = {
        targets: el,
        duration: parseInt(Math.abs(dis) / this.speed),
        easing: "linear",
      };
      if (s) {
        obj.translateY = "+=" + dis;
      } else {
        obj.translateX = "+=" + dis;
      }
      this.ani = this.$anime(obj);
    },
    mouseWheel: function (ele, fn1, fn2) {
      function wheelDelta(ev) {
        // 使火狐浏览器 和标准浏览器的 滚轮数值返回一致
        return ev.wheelDelta ? ev.wheelDelta : ev.detail * -40;
      }
      function clack(ev) {
        if (wheelDelta(ev) < 0) {
          fn2.call(ele);
        } else {
          fn1.call(ele);
        }
      }
      if (navigator.userAgent.match(/Firefox/gi)) {
        ele.addEventListener("DOMMouseScroll", function (ev) {
          // 火狐浏览器
          ev = ev || window.event;
          ev.preventDefault();
          clack(ev);
        });
      } else {
        //其他浏览器 chrome ie
        if (ele.addEventListener) {
          ele.addEventListener(
            "mousewheel",
            function (ev) {
              ev = ev || window.event;
              ev.returnValue ? (ev.returnValue = false) : ev.preventDefault();
              clack(ev);
            },
            { passive: false }
          );
        } else {
          ele.attachEvent("onmousewheel", function (ev) {
            ev = ev || window.event;
            if (ev.returnValue) {
              ev.returnValue = false;
            }
            clack(ev);
          });
        }
      }
    },
    turnMode: function (e) {
      let event = e || window.event;
      let code = event.keyCode || event.which;

      let obj = {
        49: 1,
        50: 3,
      };
      let mode = obj[code] || this.mode;
      this.$store.commit("exMode", mode);
    },
    exBtn: function () {
      let mode = this.mode == 1 ? 3 : 1;
      this.$store.commit("exMode", mode);
    },
  },
};
</script>
<style scoped>
.app-box {
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  user-select: none;
  background-color: darkorange;
}
</style>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  background-color: #fff;

  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  font-size: 1rem;
}
</style>