<div>
<div ref="menuItem" style="width: 200px;height: 200px;border: 1px solid red; display: none;"></div>
<div ref="btmBar" style="width: 200px;height: 200px;border: 1px solid rergb(0, 255, 136)"></div>
</div>
mounted() {
this.$nextTick(() => {
window.addEventListener("resize", () => {
//监听浏览器窗口大小改变
function ChangeRatio() {
var ratio = 0;
var screen = window.screen;
var ua = navigator.userAgent.toLowerCase();
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);
}
return ratio;
}
this.ratio = ChangeRatio();//
console.log(this.ratio,'实时缩放比例');
if (this.ratio > "125") {
this.$refs['menuItem'].style.display = 'block';
}else {
this.$refs['menuItem'].style.display = 'none'
}
});
});
},
查看方法用鼠标滚轮,或者谷歌浏览器设置缩放比例如下图
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!