data() {
return {
instance: null,
isZoomOpen: false
};
},
mounted() {
const that = this;
this.isZoom();
window.addEventListener("resize", function() {
that.isZoom();
});
},
methods: {
// 浏览器缩放提示 (打开控制台会影响准确度)
detectZoom: function() {
let ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
//
if (~ua.indexOf("firefox")) {
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}
} else if (~ua.indexOf("msie")) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
} else if (
window.outerWidth !== undefined &&
window.innerWidth !== undefined
) {
ratio = window.outerWidth / window.innerWidth;
}
//
if (ratio) {
ratio = Math.round(ratio * 100);
}
// 360安全浏览器下的innerWidth包含了侧边栏的宽度
if (ratio !== 100) {
if (ratio >= 95 && ratio <= 105) {
ratio = 100;
}
}
return ratio;
},
isZoom: function() {
if (this.detectZoom() < 100 || this.detectZoom() > 100) {
this.zoomNotifyOpen();
} else {
this.zoomNotifyClose();
}
},
zoomNotifyOpen: function() {
if (!this.isZoomOpen) {
this.isZoomOpen = true; // 加上标记防止多次提示
this.instance = this.$notify({
title: "提示",
message:
"你的浏览器目前处于缩放状态,页面可能会出现错位现象,建议100%大小显示",
type: "info",
duration: 0
});
}
},
zoomNotifyClose: function() {
if (this.instance !== null) {
// 判断是否为null 防止bug
this.instance.close();
this.isZoomOpen = false;
}
}
}