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"
    }),
}

标签：setContentBoxHeight,refs,clientHeight,rightBox,element,state,ui,pageHight,弹窗
来源： https://www.cnblogs.com/webSnow/p/15954790.html