问答一下,轻松解决,电脑应用解决专家!
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win10/Win11
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascriptLinux系统
PHP教程CSS教程XML教程

vue实时获取页面的宽度,自适应屏幕

更新时间:2021-07-11 14:16 作者:Little_Pig_Bug点击:
    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更好,如果多个页面使用的情况下。。。。。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容