使用 Vue 3 + TypeScript 和 setup 语法糖实现动态计算高度，实现高度根据屏幕的高度自适应

xiaoming_0208

于 2023-12-26 11:17:22 发布

阅读量1.1k

点赞数

文章标签： typescript vue.js ubuntu

本文链接：https://blog.csdn.net/xiaoming4965/article/details/135217306

版权

HTML代码部分 :style="{ height: firstSectionHeight }"

  <div class="first-bg" :style="{ height: firstSectionHeight }">
      <div class="title">
        荣誉资质
      </div>
    </div>

JS代码

<script setup lang="ts">
import { reactive, ref, computed,onMounted, onUnmounted } from 'vue'
// 动态计算第一部分高度
const firstSectionHeight = ref('100vh');// 初始化高度

const calculateFirstSectionHeight = () => {
  const windowHeight = window.innerHeight;//获取当前窗口的高度
  const offset = 350; // 偏移量，即需要减去的像素值
  firstSectionHeight.value = `${windowHeight - offset}px`;//转换为字符串，并添加单位 'px'，将            
  其赋值给 firstSectionHeight.value
  console.log(firstSectionHeight.value); //打印高度
};

onMounted(() => {
  calculateFirstSectionHeight();//调用 calculateFirstSectionHeight 函数来计算并更新第一部分的 高
  window.addEventListener('resize', calculateFirstSectionHeight); //使用 window.addEventListener 监听窗口大小变化事件，在窗口大小发生变化时自动重新计算和更新第一部分的高度。
});

onUnmounted(() => {
  window.removeEventListener('resize', calculateFirstSectionHeight);//取消监听窗口大小变化事件，以避免出现内存泄漏。
});

</script>