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

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

作者: 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>

相关文章

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

  • 2. 浏览器控制

    控制浏览器窗口大小——WebDriver设置当前窗口的宽或高 获取当前窗口的宽和高 控制浏览器后退、前进,刷新浏览器

  • 高德自定义marker

    1 先定义布局layout 2 获取并设置名字 3 转换成bitmap 4 设置

  • flutter中获取元素的大小

    本文讲述flutter中获取元素的探索之旅,并总结获取元素大小的方法。 前言 Flutter的布局体系中,带有大小...

  • JS获取屏幕大小

    JS获取屏幕大小 JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

  • RN常用组件

    Button: Image在布局中的使用:如果设置从网络获取图片,需要设置图片大小,否则显示不出来。 Toast:...

  • css布局

    1.固定布局:浏览器大小改变,元素大小位置均不变 2.流体布局(自适应布局):浏览器大小改变,元素位置不变大小改变...

  • 前端小白之js实现时钟案例

    原理:获取当前时间 再把当前时间乘以刻度度数 效果如下 css布局 注意:必须设置背景图片 center cent...

  • 字体适配

    原理:浏览器可以设置字体号大小而改成webview的根字体大小,因为采用rem单位,使得页面呈现比例放大,造成布局...

  • jQuery篇之操作jQuery对象(样式)

    获取/设置 元素内容 获取/设置 元素属性 获取/设置 元素样式 获取/设置 元素位置和大小

网友评论

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

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