el-dialog高度自適應詳解

一、為什麼需要高度自適應

在使用el-dialog組件時，通常需要我們手動設置其高度。但是手動設置高度會存在很多問題，比如說：

1、高度不夠時出現滾動條，影響用戶體驗

2、高度過高時出現空白，影響頁面美觀

因此，使用高度自適應可以很好地解決這些問題。

二、如何實現高度自適應

實現高度自適應的方法有多種，下面介紹兩種比較常見的方法。

1、基於CSS的實現

<style>
  .el-dialog__body {
    overflow: auto;
    height: calc(100% - 100px);
  }
</style>

<template>
  <el-dialog
    title="這是標題"
    :visible.sync="visible"
    width="40%">
    <div class="el-dialog__body">
      這是內容
    </div>
  </el-dialog>
</template>

通過在el-dialog__body上設置高度為calc(100% – 100px)，其中100px是el-dialog上面標題欄+底部按鈕欄的高度之和。這樣就可以保證el-dialog__body的高度始終佔滿父元素。

2、基於JS的實現

<template>
  <el-dialog
    title="這是標題"
    :visible.sync="visible"
    width="40%"
    :before-close="beforeClose">
    <div ref="dialogBody">
      這是內容
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        dialogHeight: 0
      };
    },
    methods: {
      beforeClose(done) {
        this.dialogHeight = this.$refs.dialogBody.clientHeight;
        done();
      }
    },
    watch: {
      dialogHeight() {
        this.$nextTick(() => {
          this.$el.querySelector(".el-dialog__body").style.height = this.dialogHeight + "px";
        });
      }
    }
  };
</script>

通過在before-close鉤子中獲取el-dialog__body的高度，並在watch中監聽高度變化，當高度變化時動態改變el-dialog__body的高度。

三、如何適配不同屏幕

前面的方法都存在一個問題，就是無法適配移動端屏幕。因此，我們需要對不同屏幕進行適配。

1、基於CSS的適配

<style>
  .el-dialog__body {
    overflow: auto;
    max-height: calc(100vh - 200px);
    height: auto !important;
  }

  @media only screen and (max-width: 768px) {
    .el-dialog__body {
      max-height: calc(100vh - 300px);
    }
  }
</style>

<template>
  <el-dialog
    title="這是標題"
    :visible.sync="visible"
    width="40%">
    <div class="el-dialog__body">
      這是內容
    </div>
  </el-dialog>
</template>

通過設置max-height為calc(100vh – 200px)，其中200px是標題欄和底部按鈕欄的高度之和。這樣可以保證在屏幕高度小於800px時，el-dialog__body的高度最大為屏幕高度-300px，否則為500px。在移動端屏幕上，通過@media動態修改max-height。

2、基於JS的適配

<template>
  <el-dialog
    title="這是標題"
    :visible.sync="visible"
    width="40%"
    :before-close="beforeClose"
    :destroy-on-close="true">
    <div ref="dialogBody">
      這是內容
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        dialogHeight: 0,
        windowHeight: 0
      };
    },
    methods: {
      beforeClose(done) {
        this.dialogHeight = this.$refs.dialogBody.clientHeight;
        done();
      },
      getWindowSize() {
        this.windowHeight = window.innerHeight;
      }
    },
    mounted() {
      this.getWindowSize();
      window.addEventListener("resize", this.getWindowSize);
    },
    beforeDestroy() {
      window.removeEventListener("resize", this.getWindowSize);
    },
    watch: {
      dialogHeight() {
        if (this.windowHeight  {
            this.$el.querySelector(".el-dialog__body").style.height = (this.windowHeight - 300) + "px";
          });
        } else {
          this.$nextTick(() => {
            this.$el.querySelector(".el-dialog__body").style.height = "500px";
          });
        }
      }
    }
  };
</script>

通過在beforeClose鉤子中獲取el-dialog__body的高度，並在watch中監聽高度變化，當高度變化時動態改變el-dialog__body的高度。通過在mounted鉤子中添加resize事件的監聽以及在beforeDestory鉤子中移除resize事件的監聽，當窗口大小發生變化時重新獲取窗口大小。

四、小結

通過本文的介紹，我們了解了el-dialog高度自適應的實現方法以及如何適配不同屏幕。希望對大家有所幫助。