美文网首页
获取当前浏览器大小并设置布局

获取当前浏览器大小并设置布局

作者: fanyu__ | 来源:发表于2021-06-09 17:34 被阅读0次
    <template>
        <div class="layout" id="layout" ref="layout" :style="`width:${width}px;height:${height}px`">
    
        </div>
    </template>
    
    <script lang="ts">
    import { Component, Vue } from 'vue-property-decorator'
    @Component({
        components: {}
    })
    export default class Layout extends Vue {
        height = 0
    
        width = 0
    
        mounted() {
            this.$nextTick(() => {
                this.width = window.innerWidth
                this.height = window.innerHeight
            })
    
            window.onresize = () => {
                return (() => {
                    this.width = window.innerWidth
                    this.height = window.innerHeight
                })()
            }
        }
    }
    </script>
    
    <style lang="scss" scoped>
    .layout {
        background: darkcyan;
    }
    </style>
    
    

    相关文章

      网友评论

          本文标题:获取当前浏览器大小并设置布局

          本文链接:https://www.haomeiwen.com/subject/lzgeeltx.html