Vue中弹窗大小内容进行自适应

在Vue.js中，实现一个自适应大小和内容的弹窗通常涉及到组件设计以及CSS样式调整。你可以创建一个响应式的设计，通过以下步骤来完成：

1. **使用Vue组件**:
创建一个名为`Modal`的自定义Vue组件，它会接受一些属性如`width`, `height`, 和 `content`作为输入。例如：

   <template>
     <div class="modal" :style="{ width: width + 'px', height: height + 'px' }">
       <div v-html="content"></div>
     </div>
   </template>

   <script>
   export default {
     props: {
       width: {
         type: Number,
         required: true
       },
       height: {
         type: Number,
         required: true
       },
       content: {
         type: String,
         required: true
       }
     }
   }
   </script>

2. **CSS样式**:
为了使弹窗内容自适应其容器，你需要给`.modal`添加一些基本的CSS样式。例如，可以设置max-width和overflow为auto来允许内容自动缩放：

   .modal {
     position: fixed;
     z-index: 9999;
     max-width: 100%;
     overflow: auto;
     box-sizing: border-box;
   }

   // 如果需要让弹窗在小屏幕下更易读，可以添加媒体查询
   @media (max-width: 768px) {
     .modal {
       /* 自适应样式 */
     }
   }