a-modal的样式调整

a-modal宽和高的设置

主要是通过a-modal自带的width和bodyStyle来设置

注意：a-modal的父盒子是body

// 现在我要点击按钮，弹出对话框，对话框展示的是文本信息，我们也可以添加下载文本功能
<template>
  <div id="hello">
    <div style="margin-top:50px">
      <button @click="openDialog">打开对话框</button>
    </div>
    // 从这里这里开始就是a-modal的使用了
    
    <a-modal
      v-model="visible"
      :width="1000"
      :bodyStyle="{ height: '600px', overflowY: 'auto', paddingBottom: '20px' }"
      centered
      :footer="null"
    >
      <h1>
        我是标题
      </h1>
      <div class="dialogText">{{ dialogText }}</div>
      <a-button icon="arrow-down" type="primary" size="small">
        下载
      </a-button>
    </a-modal>
    
    // a-modal到这里结束
  </div>
</template>
<script>
import '@/mock/index.js'
export default {
  data() {
    return {
      dialogText: '', // 我这里使用了mock来模拟了对话框展示的文字
      visible: false
    }
  },
  methods: {
    // mock模拟获取对话框数据
    async getDialogData() {
      const data = await this.$http('api/getDialogText')
      console.log(data.data)
      this.dialogText = data.data.dialogText
    },
    // 打开对话框
    openDialog() {
      this.visible = true
      this.getDialogData()
    }
  }
}
</script>
<style>
.ant-modal {
  position: relative;
}
.ant-modal .ant-modal-body h1 {
  /* transform: translateX(50%); */
  text-align: center;
}
.ant-modal .ant-modal-close {
  position: absolute;
  top: -40px;
  right: -40px;
}
.ant-modal .ant-modal-close .ant-modal-close-icon {
  background-color: rgb(255, 255, 255, 0.5);
}
.ant-btn {
  position: absolute;
  right: -90px;
  bottom: -5px;
}
</style>

复制

最后的效果，如图：

sition: absolute;
right: -90px;
bottom: -5px;
}

最后的效果，如图：
![效果图](https://img-blog.csdnimg.cn/20210511221536492.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDU3NjgwMA==,size_16,color_FFFFFF,t_70#pic_center)



复制