vue 监听屏幕可视区域宽度 动态设置弹窗位置
vue 监听屏幕可视区域宽度 动态设置弹窗位置,避免被f12遮挡,或者是菜单栏等层级更高的事物遮挡。
·
1、监听屏幕可视宽度:
data(){
return{
showWidth:0, //屏幕可视宽度
}
}
mounted(){
const that = this
window.onresize = () => {
return (() => {
that.showWidth = document.body.clientWidth
})()
}
},
注意点:
1、mounted中定义的屏幕宽度变化时才会重新获取,即window.onresize,所以在页面初始化的时候是不会获取屏幕宽度来改变showWidth的初始值的;想要在初始化的时候也获取屏幕宽度,只需要在created中插入语句:【this.showWidth = document.body.clientWidth】即可。
2、动态设置弹窗位置
<div :style=" showWidth < 1370 ? { top: '-66px' , left: '-160px' } : { top: '-66px' , left: '99px' }) " class="move-popup" >
<h5>确认进行本次操作吗?</h5>
<div class="btn">
<button @click.stop="handleCancel">取消</button>
<button @click.stop="handleConfirm">确定</button>
</div>
</div>
.move-popup{
position: absolute;
width: 160px;
height: auto;
}
写法:
将整个确认框设置成定位,然后通过内联样式,在不同的视口宽度下,设置不同的top和left值,就能实现动态的弹窗位置了。(利用f12可以自测不同屏幕宽度下的弹窗位置状况。)
更多推荐
已为社区贡献2条内容
所有评论(0)