大佬们 点赞支持下!!!!
// 混入代码
export default {
data() {
return {
resizeData: {
width: 1920, //设计稿宽
height: 1080, //设计稿高
ratio: 16 / 9 //比例
}
};
},
created() {
this.refreshScale();
window.addEventListener("resize", this.refreshScale, false);
window.addEventListener(
"pageshow",
function(e) {
if (e.persisted) {
// 浏览器后退的时候重新计算
this.refreshScale();
}
},
false
);
},
beforeDestroy() {
window.removeEventListener("reisze", this.refreshScale());
},
methods: {
//zoom
setBodyZoom () {
const t = window.screen.width
let zoomNum = t / 1920 * 10
zoomNum = Math.round(zoomNum) / 10
document.body.style.zoom = zoomNum
},
//等比缩放高度铺满
refreshScale() {
const bodyStyle = document.createElement("style");
bodyStyle.innerHTML = `body{width:${this.resizeData.width}px; height:${this.resizeData.height}px!important;background-image: none;background-color: #000517 !important;overflow: hidden;}`;
document.documentElement.firstElementChild.appendChild(bodyStyle);
let docWidth = document.documentElement.clientWidth;
let docHeight = document.documentElement.clientHeight;
const designWidth = this.resizeData.width,
designHeight = this.resizeData.height,
heightRatio = docHeight / designHeight;
document.body.style =
"transform:scale(" +
heightRatio +
");transform-origin:left top;margin-left: " +
(docWidth - designWidth * heightRatio) / 2 +
"px";
},
//// 等比缩放宽度铺满
refreshScaleWidth() {
const bodyStyle = document.createElement("style");
bodyStyle.innerHTML = `body{width:${this.resizeData.width}px; height:${this.resizeData.height}px!important;background-image: none;background-color: #000517 !important;overflow: hidden;}`;
document.documentElement.firstElementChild.appendChild(bodyStyle);
let docWidth = document.documentElement.clientWidth;
const designWidth = this.resizeData.width,
widthRatio = docWidth / designWidth;
document.body.style =
"transform:scale(" + widthRatio + ");transform-origin:left top;";
},
//// 全屏铺满 根据宽度100% 高度压缩改变 或者高度100% 宽度压缩改变
refreshScaleFullh() {
const bodyStyle = document.createElement("style");
bodyStyle.innerHTML = `body{width:${this.resizeData.width}px; height:${this.resizeData.height}px!important;background-image: none;background-color: #000517 !important;overflow: hidden;}`;
document.documentElement.firstElementChild.appendChild(bodyStyle);
let docWidth = document.documentElement.clientWidth;
let docHeight = document.documentElement.clientHeight;
const designWidth = this.resizeData.width,
designHeight = this.resizeData.height,
widthRatio = docWidth / designWidth,
heightRatio = docHeight / designHeight;
document.body.style =
"transform:scale(" +
widthRatio +
"," +
heightRatio +
");transform-origin:left top;";
},
//根据宽度100% 高度不压缩
refreshScaleFull() {
let baseWidth = document.documentElement.clientWidth;
let baseHeight = document.documentElement.clientHeight;
let appStyle = document.getElementById("app").style;
let realRatio = baseWidth / baseHeight;
let designRatio = this.resizeData.ratio;
let scaleRate = baseWidth / this.resizeData.width;
if (realRatio > designRatio) {
scaleRate = baseHeight / this.resizeData.height;
}
appStyle.transformOrigin = "left top";
appStyle.transform = `scale(${scaleRate}) translateX(0%)`;
appStyle.width = `${baseWidth / scaleRate}px`;
//然后高度 自适应 里面内容根据flex 跟百分比计算
}
}
};
//引入方式
import echartMixins from "@/utils/resizeMixins";
//使用mixins
mixins: [echartMixins],