vue项目动态获取窗口以及元素宽高-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue项目动态获取窗口以及元素宽高。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

场景1：页面刚进来时，获取窗口的默认宽高以及某个元素（div）的默认宽高

场景2：当页面缩放时，自动获取窗口的宽高以及某个元素（div）的宽高

效果如下：

vue项目动态获取窗口以及元素宽高

因为不喜欢看别人写那么多废话，只想直接看代码，因为我有很完善的注释文章来源地址https://www.toymoban.com/news/detail-505531.html

<template>
    <div class="document">
        <strong>动态获取页面窗口及元素宽高</strong>
        <div>
            <p class="red">页面窗口默认宽度为：{{windowWidth}}</p>
            <p class="red">页面窗口默认高度为：{{windowHeight}}</p>
        </div>
        <div class="temp" ref="Temp">
            <p>此元素的宽度是：{{tempWidth}}</p>
            <p>此元素的高度是：{{tempHeight}}</p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            windowWidth:0,//页面窗口宽度
            windowHeight:0,//页面窗口高度
            tempWidth:0,//元素宽度
            tempHeight:0,//元素高度
        }
    },
    mounted(){
        var that = this;
        //刚进入页面时，获取窗口默认宽高度
        this.windowWidth = document.body.clientWidth
        this.windowHeight = document.body.clientHeight

        //进入页面元素默认宽高
        this.tempWidth = this.$refs.Temp.offsetWidth
        this.tempHeight = this.$refs.Temp.offsetHeight
        //根据屏幕缩放自动获取页面宽高
        window.onresize = () => {
            return (() => {
                //窗口缩放自动获取页面宽高
                window.fullWidth = document.documentElement.clientWidth;
                window.fullHeight = document.documentElement.clientHeight;
                that.windowWidth = window.fullWidth; //宽
                that.windowHeight = window.fullHeight; //高

                //窗口缩放自动获取元素宽高
                this.tempWidth = this.$refs.Temp.offsetWidth //宽
                this.tempHeight = this.$refs.Temp.offsetHeight //高
            })()
        }
    },
    watch:{
        windowHeight (val) {
            let that = this;
            console.log("实时屏幕高度：",val, that.windowHeight);
        },
        windowWidth (val) {
            let that = this;
            console.log("实时屏幕宽度：",val, that.windowWidth);
        }
    }
}
</script>

<style scoped>
    .document{height:100%;}
    html,body{height:100%;font-size:30px;}
    .red{color:red;font-weight:600;}
    p{}
    .temp{width:80%;height:40%;background:red;}
</style>

到了这里，关于vue项目动态获取窗口以及元素宽高的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！