vue实时获取页面的宽度,自适应屏幕
data(){return{fullWidth:document.documentElement.clientWidth}},created(){window.addEventListener('resize', this.handleResize)},beforeDe...
·
data(){
return{
fullWidth:document.documentElement.clientWidth
}
},
created(){
window.addEventListener('resize', this.handleResize)
},
beforeDestroy: function () {
window.removeEventListener('resize', this.handleResize)
},
computed:{
...mapGetters([
'isCollapse',
]),
rightWidth(){
let leftWidth = this.isCollapse ? '64' : '200';
console.log(this.fullWidth)
return (this.fullWidth-leftWidth)+'px'
}
},
methods: {
handleResize (event) {
this.fullWidth = document.documentElement.clientWidth
},
}
我想要实现的功能是,根据左侧菜单,右边的菜单自适应,刚开始是用calc(100% - 200px),因为我左侧菜单设置的是200px,后来发现,当我点击收缩按钮,收起左侧菜单的时候,此时左侧菜单就不是200px,所以我才想到实时获取屏幕的宽度,然后同时通过收缩按钮的开放状态,获取此时左侧菜单的宽度,屏幕的宽度-左侧菜单的宽度,剩下的就是我们右侧内容的宽度。
其实这个一个很小的功能,但是我用到的地方挺多的 ,比如在echart里面,可以写成mixins更好,如果多个页面使用的情况下。。。。。
更多推荐
已为社区贡献8条内容
所有评论(0)