用vue来改变不同尺寸电脑屏幕的弹窗高度

在Vue.js中，你可以结合计算属性（Computed Properties）和媒体查询（Media Queries）来动态调整弹窗（Modal）的高度，以便根据不同屏幕尺寸提供良好的用户体验。这里是一个简单的示例：

首先，创建一个计算属性来获取屏幕高度：

<template>
  <!-- 弹窗组件 -->
  <modal v-if="showModal" :height="getModalHeight()" @close="showModal = false"></modal>
</template>

<script>
export default {
  data() {
    return {
      showModal: false, // 是否显示模态框
    };
  },
  computed: {
    // 计算属性，根据屏幕尺寸动态计算弹窗高度
    getModalHeight() {
      const screenWidth = window.innerWidth; // 获取屏幕宽度
      let height;

      if (screenWidth <= 1366) { // 小于等于1366px，假设13寸左右的分辨率
        height = '400px'; // 设置弹窗高度为400px作为示例
      } else if (screenWidth <= 1920) { // 15寸左右的分辨率范围
        height = '500px';
      } else { // 屏幕较大，例如台式机
        height = '700px';
      }

      return height;
    },
  },
};
</script>

然后，在你的弹窗组件（modal.vue）中接收这个高度值，并根据它渲染模态框：

<!-- modal.vue -->
<div class="modal" :style="{ maxHeight: height, overflow: 'auto' }">
  <!-- 模态框内容 -->
</div>

当屏幕尺寸发生变化时，这个计算属性会被自动更新，从而调整弹窗的高度。