功能样式

Vue 动态设置元素高度

Vue 文件如下

<template>
  <div :style="autoHeight"></div>
</template>
<script>
  let windowHeight = parseInt(window.innerHeight)
  export default {
    data() {
      return {
        windowHeight: windowHeight,
        autoHeight: {
          height: ''
        },
      }
    },
    methods: {
      getHeight() {
        this.autoHeight.height = (windowHeight - 110) + 'px';
      },
    },
    created() {
        window.addEventListener('resize', this.getHeight)
        this.getHeight()
      },
      destroyed() {
        window.removeEventListener('resize', this.getHeight)
      }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

说明

给div动态绑定 style 样式，如autoHeight

<template><div :style="autoHeight"></div></template>

获取浏览器高度后，经过计算后赋值

  let windowHeight = parseInt(window.innerHeight)
  export default {
    data() {
      return {
        windowHeight: windowHeight,
        autoHeight: {
          height: ''
        },
      }
    },
   methods: {
      getHeight() {
        this.autoHeight.height = (windowHeight - 110) + 'px';
      },
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

created生命周期中，监听浏览器的变化

 created() {
        window.addEventListener('resize', this.getHeight)
        this.getHeight()
      },
 destroyed() {
        window.removeEventListener('resize', this.getHeight)
      }

1
2
3
4
5
6
7

window 下的各种宽高度

window.innerWidth 文档显示区(body)的宽度
window.innerHeight 文档显示区(body)的高度
window.outrWidth 窗口的宽度(body+任务栏)
window.outerHeight 窗口的高度(body+任务栏)
window.pageYOffset 文档左上角到文档显示区左上角的距离
screen.width 分辨率的宽度
screen.height 分辨率的高度
screen.availWidth 去掉任务栏剩余分辨率宽度
screen.availHeight 去掉任务栏剩余分辨率高度

上次更新: 2025/02/26, 08:57:57

← 安装插件 use() 项目开发配置→