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

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