el-dialog詳解

一、eldialog高度

el-dialog是Element UI框架中的一個組件，用於彈出對話框。使用el-dialog時，我們可以通過設置其高度來達到適應不同場景的目的。

在el-dialog中，我們可以通過設置height屬性或者max-height屬性來控制其高度。默認情況下，el-dialog的高度是自動計算出來的，但如果我們希望el-dialog達到特定的高度，我們可以通過設置height屬性或者max-height屬性來完成。

height屬性可以設置el-dialog的高度，可以接受一個字元串作為參數。例如，設置height為’200px’，則el-dialog的高度為200像素。

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  height="200px"
>
  <p>這是一段消息內容</p>
</el-dialog>

max-height屬性可以設置el-dialog的最大高度，同樣接受一個字元串作為參數。如果內容的高度超過了max-height的值，則el-dialog會出現滾動條。

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  max-height="400px"
>
  <p>這是一段消息內容</p>
  <p>這是另外一段消息內容</p>
  <p>這是第三段消息內容</p>
  <p>這是第四段消息內容</p>
  <p>這是第五段消息內容</p>
</el-dialog>

二、eldialog關閉事件

在el-dialog中，我們可以通過各種方式關閉對話框。其中一種常見的方式是設置關閉按鈕，點擊該按鈕後可以關閉對話框。我們可以通過監聽自定義事件進行一些操作，例如關閉菜單、還原某些狀態。

在el-dialog組件中，我們可以通過v-if或者v-model來控制對話框的打開和關閉。當我們想要自動關閉對話框時，可以使用v-if和定時器。

<template>
  <div>
    <el-button type="primary" @click="openDialog">打開對話框</el-button>
    <el-dialog
      title="提示"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handleDialogClose"
    >
      <p>您確定要刪除該項嗎？</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm">確 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleDialogClose() {
      this.dialogVisible = false;
      console.log('對話框已關閉');
    },
    handleDialogConfirm() {
      console.log('用戶點擊了確定按鈕');
    },
  },
};
</script>

三、eldialog設置高度

在el-dialog中，我們可以通過設置height屬性來控制其高度。默認情況下，el-dialog的高度是自動計算出來的，但如果我們希望el-dialog達到特定的高度，我們可以通過設置height屬性來完成。

<template>
  <div>
    <el-button type="primary" @click="openDialog">打開對話框</el-button>
    <el-dialog
      title="提示"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :height="dialogHeight"
      width="30%"
      @close="handleDialogClose"
    >
      <p>這是一段消息內容</p>
      <p>這是另外一段消息內容</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogHeight: '250px',
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleDialogClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

四、eldialog如何關閉header選取

在el-dialog中，我們可以通過設置header slot來自定義對話框標題區域的內容。例如，我們可以在標題區域右側添加一個關閉按鈕，方便用戶關閉對話框。

<template>
  <div>
    <el-button type="primary" @click="openDialog">打開對話框</el-button>
    <el-dialog
      title="自定義標題"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="false"
    >
      <template #header>
        <div>
          自定義標題內容
          <i class="el-dialog__headerbtn el-dialog__close"></i>
        </div>
      </template>
      <p>這是一段消息內容</p>
      <p>這是另外一段消息內容</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
  },
};
</script>