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

时间:2020-02-27 14:52:26   收藏:0   阅读:1197
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
        },
    }  

 

原文:https://www.cnblogs.com/ygunoil/p/12371802.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!