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

 內容原創，轉載請注明出處！！！！謝謝合作！