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更好,如果多个页面使用的情况下。。。。。

Logo

前往低代码交流专区

更多推荐