vue中ant 弹窗自适应屏幕大小

在Vue中，Ant Design的弹窗组件可以通过设置宽度和高度来实现自适应屏幕大小的效果。

首先，需要在弹窗组件的props中添加width和height两个属性，用于接收弹窗的宽度和高度。

然后，在弹窗组件的template中，可以使用v-bind绑定style属性，通过计算得出弹窗的宽度和高度，从而实现自适应屏幕大小的效果。

以下是示例代码：

<template>
  <a-modal :title="title" :visible="visible" :width="width" :height="height">
    <p>这是弹窗内容。</p>
  </a-modal>
</template>

<script>
export default {
  props: {
    title: String,
    visible: Boolean,
    width: {
      type: Number,
      default: 520
    },
    height: {
      type: Number,
      default: 320
    }
  },
  computed: {
    modalStyle() {
      return {
        width: `${this.width}px`,
        height: `${this.height}px`
      }
    }
  }
}
</script>

<style scoped>
.ant-modal-body {
  overflow-y: auto;
}
</style>

在上面的代码中，我们使用了computed属性来计算弹窗的style属性，其中width和height使用了props中传入的值。在style中，我们将width和height转换为像素值，并将其作为样式属性绑定到弹窗组件上。

需要注意的是，如果弹窗中的内容过多，会导致内容溢出，因此我们需要在样式中设置overflow-y属性为auto，从而实现内容滚动的效果。