当前位置：首页 > VUE

vue实现屏幕撑满

2026-03-28 14:32:04VUE

使用 CSS 设置全屏

在 Vue 中实现屏幕撑满，可以通过 CSS 设置 html、body 和根元素的高度为 100%。确保所有父级容器的高度也设置为 100%。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  height: 100%;
}

使用 Flexbox 布局

Flexbox 是一种灵活的布局方式，可以轻松实现全屏布局。将根元素设置为 display: flex，并确保子元素撑满剩余空间。

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
}

使用 Viewport 单位

Viewport 单位（vh 和 vw）可以直接根据视口大小设置元素尺寸。将元素的高度设置为 100vh 可以确保其撑满整个屏幕。

.full-screen {
  height: 100vh;
  width: 100vw;
}

使用 Vue 的动态样式绑定

在 Vue 中，可以通过动态样式绑定实现全屏效果。使用 :style 绑定计算属性或方法，动态设置元素的高度和宽度。

<template>
  <div :style="fullScreenStyle">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  computed: {
    fullScreenStyle() {
      return {
        height: `${window.innerHeight}px`,
        width: `${window.innerWidth}px`
      };
    }
  }
};
</script>

处理响应式布局

为了确保在不同设备上都能撑满屏幕，可以结合媒体查询和动态样式调整。监听窗口大小变化，动态更新元素尺寸。

<template>
  <div ref="container" :style="containerStyle">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowHeight: 0,
      windowWidth: 0
    };
  },
  mounted() {
    this.updateDimensions();
    window.addEventListener('resize', this.updateDimensions);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateDimensions);
  },
  methods: {
    updateDimensions() {
      this.windowHeight = window.innerHeight;
      this.windowWidth = window.innerWidth;
    }
  },
  computed: {
    containerStyle() {
      return {
        height: `${this.windowHeight}px`,
        width: `${this.windowWidth}px`
      };
    }
  }
};
</script>

使用第三方库

如果需要更复杂的全屏功能，可以使用第三方库如 vue-fullscreen。这些库提供了简单的 API 来实现全屏效果。

vue实现屏幕撑满

npm install vue-fullscreen

<template>
  <div>
    <button @click="toggleFullscreen">全屏</button>
    <div ref="fullscreenElement">
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
import { useFullscreen } from 'vue-fullscreen';

export default {
  setup() {
    const { toggle, isFullscreen } = useFullscreen();
    return { toggle, isFullscreen };
  },
  methods: {
    toggleFullscreen() {
      this.toggle(this.$refs.fullscreenElement);
    }
  }
};
</script>