element ui 弹窗样式居中 （弹窗里面的图片做等比自适应展示）

<template>
  <div class="wrap-dialog-box">
    <!-- 弹窗 -->
    <el-dialog title="通知" :visible.sync="dialogVisible" center width="80%" class="dialog-box-center">
      <div class="carousel-wrap-box">
        <el-carousel :autoplay="false" trigger="click" :height="carouselHeight" indicator-position="outside"
        >
          <el-carousel-item v-for="item in testImgList" :key="item">
            <div style="text-align: center;width: 100%;height: 100%;">
              <img :src="item" class="image-item" />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script> import { mapState } from "vuex"; export default { data() { return { dialogVisible: false, testImgList: [], // 后台返回来图片数据
 }; }, computed: { ...mapState({ carouselHeight: state => state.pageHight.contentBoxHeight - 150 + "px" // 使用 写成 mapState的形式方便这边计算动态 高度 也可以写成 mapGetters 
 }) }, created(){ }, methods:{ } }; </script>

<style lang="scss"> .wrap-dialog-box { // element ui Dialog 对话框居中显示 .dialog-box-center{ text-align: center; &:after { content: ""; display: inline-block; height: 100%; width: 0; vertical-align: middle;
      } .el-dialog{ text-align: center; display: inline-block; margin: 0 !important; vertical-align: middle; max-width: 100%;
      } } .carousel-wrap-box {
      /* 图片原图大小自适应 等比缩放 */ .image-item { max-width: 100%; max-height: 100%;
    }
    /* tab指示器的样式 */ .el-carousel__button { height: 6px; background-color: #1989fa;
    } } } </style>

// store/modules/pageHight.js
export default { state: { contentBoxHeight: (window.innerHeight - 80), // 动态计算右侧内容总高度
 }, mutations: { setContentBoxHeight(state, pageHight) { state.contentBoxHeight = pageHight; } }, }

// home文件全局处理下右边的布局高度 右侧最外层div 给上 ref 
mounted() { window.addEventListener('resize', () => { if (this.$refs.rightBox && this.$refs.rightBox.clientHeight) { this.setContentBoxHeight(this.$refs.rightBox.clientHeight) } }) if (this.$refs.rightBox.clientHeight) { this.setContentBoxHeight(this.$refs.rightBox.clientHeight); } }, methods: { ...mapMutations({ "setContentBoxHeight": "setContentBoxHeight" }), }

 内容原创，转载请注明出处！！！！谢谢合作！