这里会说两种情况下的适配方式及应用:
1. 整系统所有页面都是大屏可视化系统
2. 部分页面是大屏页面,部分是后台管理页面,两者共存的整系统
第一种情况:
项目中public文件夹里的入口文件 index.html
里直接引入适配代码文件即可。
截图说明及代码如下所示:
public目录
index.html文件
flexable.js代码
// 数据大屏适配
(function (win) {
var bodyStyle = document.createElement("style");
// 这里根据具体的设计稿尺寸来定
bodyStyle.innerHTML = `body{width:1920px; height:1080px; transform:scale(1);}`;
document.documentElement.firstElementChild.appendChild(bodyStyle);
function refreshScale() {
let docWidth = document.documentElement.clientWidth;
let docHeight = document.documentElement.clientHeight;
var designWidth = 1920, // 这里根据具体的设计稿尺寸来定
designHeight = 1080, // 这里根据具体的设计稿尺寸来定
widthRatio = docWidth / designWidth,
heightRatio = docHeight / designHeight;
document.body.style = `transform:scale(${widthRatio});transform-origin:left top;overflow: hidden;`;
// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
setTimeout(function () {
var lateWidth = document.documentElement.clientWidth,
lateHeight = document.documentElement.clientHeight;
if (lateWidth === docWidth) return;
widthRatio = lateWidth / designWidth;
heightRatio = lateHeight / designHeight;
document.body.style =
"transform:scale(" +
widthRatio +
");transform-origin:left top;overflow: hidden;";
}, 0);
}
refreshScale();
// pageshow事件: 当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。
// (这包括了后退/前进按钮操作,同时也会在 onload 事件触发后初始化页面时触发)
win.addEventListener(
"pageshow",
function (e) {
if (e.persisted) {
// 判断该页面是否被缓存,如果是,则调用方法
// 浏览器后退的时候重新计算
refreshScale();
}
},
false
);
win.addEventListener("resize", refreshScale, false);
})(window);
第二种情况:
使用 mixin
混入方式仅在大屏页面引入使用即可。
截图说明及代码如下所示:
<template>
<div id="data-view">
<div id="full-screen-container">
<div class="main-header">header</div>
<div class="main-body">body</div>
</div>
</div>
</template>
import { autoResize } from "@/mixin/autoResize";
export default{
mixins: [autoResize],
}
autoResize.js代码
export const autoResize = {
mounted() {
var bodyStyle = document.createElement("style");
// 这里根据具体的设计稿尺寸来定
bodyStyle.innerHTML = `#full-screen-container{width:1920px; height:1080px; transform:scale(1);}`;
document.documentElement.firstElementChild.appendChild(bodyStyle);
this.refreshScale();
window.addEventListener("pageshow", this.pageshowFunc, false);
window.addEventListener("resize", this.refreshScale, false);
},
methods: {
refreshScale() {
let docWidth = document.documentElement.clientWidth;
let docHeight = document.documentElement.clientHeight;
var designWidth = 1920, // 这里根据具体的设计稿尺寸来定
designHeight = 1080, // 这里根据具体的设计稿尺寸来定
widthRatio = docWidth / designWidth,
heightRatio = docHeight / designHeight;
// 获取大屏页面容器 DOM
var fullScreenDom = document.getElementById("full-screen-container");
fullScreenDom.style = `transform:scale(${widthRatio});transform-origin:left top;overflow: hidden;`;
// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
setTimeout(function () {
var lateWidth = document.documentElement.clientWidth,
lateHeight = document.documentElement.clientHeight;
if (lateWidth === docWidth) return;
widthRatio = lateWidth / designWidth;
heightRatio = lateHeight / designHeight;
fullScreenDom.style =
"transform:scale(" +
widthRatio +
");transform-origin:left top;overflow: hidden;";
}, 0);
},
// pageshow事件: 当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。
// (这包括了后退/前进按钮操作,同时也会在 onload 事件触发后初始化页面时触发)
pageshowFunc(e) {
if (e.persisted) {
// 判断该页面是否被缓存,如果是,则调用方法
// 浏览器后退的时候重新计算
this.refreshScale();
}
},
},
beforeDestroy() {
window.removeEventListener("pageshow", this.pageshowFunc);
window.removeEventListener("resize", this.refreshScale);
},
};