🍁前言

el-dialog是Element UI庫中的一個重要組件，用于在Vue應用程序中創建彈出框。它提供了一組實用的屬性和事件，讓我們能夠輕松地實現各種彈出框功能。本文將詳細介紹el-dialog組件的使用方法和示例，幫助您更好地理解如何在實際項目中使用它。

🍁el-dialog簡介

el-dialog是一個非常靈活的彈出框組件，它可以通過簡單的配置來實現各種樣式的彈出框。el-dialog組件基于Element UI庫，因此在使用之前需要確保已經正確引入了Element UI庫。

🍁el-dialog屬性

el-dialog提供了許多屬性，用于控制彈出框的外觀和行為。以下是一些常用的屬性：

• 📒visible：控制彈出框是否可見。
• 📒title：彈出框的標題。
• 📒width：彈出框的寬度。
• 📒fullscreen：是否全屏顯示。
• 📒append-to-body：將彈窗附加到body上。
• 📒close-on-click-modal：點擊蒙層是否關閉彈窗。
• 📒close-on-press-escape：按下Esc鍵是否關閉彈窗。
• 📒show-close：是否顯示關閉按鈕。
• 📒draggable：是否可拖動。
• 📒resizable：是否可調整大小。
  除了以上屬性外，el-dialog還支持一些自定義事件，例如：@open、@close等。這些事件可以在組件實例中通過 $emit 方法來觸發。

🍁el-dialog示例

下面是一個簡單的el-dialog示例，展示了如何使用屬性和事件來控制彈出框的行為和樣式：

在模板中添加el-dialog組件：
html

<template>  <div>  <el-button @click="dialogVisible = true">打開彈出框</el-button>  <el-dialog :visible.sync="dialogVisible" title="提示" width="30%" @close="dialogVisible = false">  <p>這是一段信息</p>  <div slot="footer" class="dialog-footer">  <el-button @click="dialogVisible = false">取 消</el-button>  <el-button type="primary" @click="dialogVisible = false">確 定</el-button>  </div>  </el-dialog>  </div>  
</template>

在腳本中定義數據和方法：

export default {  data() {  return {  dialogVisible: false,  };  },  
};

在這個示例中，我們通過點擊按鈕來控制dialogVisible的值，從而打開或關閉彈出框。visible.sync屬性用于雙向綁定彈出框的可見性。title屬性用于設置彈出框的標題。width屬性用于設置彈出框的寬度。@close事件用于監聽彈出框關閉事件，并在關閉時設置dialogVisible為false。在彈出框的內容部分，我們通過p標簽來添加文本。在底部工具欄中，我們通過slot="footer"來定義底部按鈕的位置，并通過el-button來添加取消和確定按鈕。注意，為了能夠正確顯示底部工具欄，我們需要在彈出的內容后面添加一個div元素作為底部工具欄的容器，并使用slot="footer"來指定插槽名稱。同時，我們還可以根據需要添加其他屬性和事件來控制彈出框的行為和樣式。例如，我們可以設置fullscreen屬性為true來全屏顯示彈出框，或者設置draggable屬性為true來使彈出框可拖動。同時，我們還可以通過觸發自定義事件來實現一些特定的功能，例如在彈出框打開時觸發@open事件來執行一些操作。總之，el-dialog組件提供了豐富的屬性和事件，讓我們可以靈活地實現各種樣式的彈出框功能。在實際項目中，我們可以根據具體需求進行配置和使用。

🍁父子組件值傳遞示例

當el-dialog組件聲明在子組件中時，父組件和子組件可以通過props和事件進行相互傳遞參數。以下是一個代碼示例：

• 父組件（ParentComponent.vue）：

html

<template>  <div>  <child-component ref="childDialog" :initial-message="parentMessage" @child-event="handleChildEvent"></child-component>  <el-button @click="openChildDialog">打開子組件的彈出框</el-button>  </div>  
</template>  <script>  
import ChildComponent from './ChildComponent.vue';  export default {  components: {  ChildComponent  },  data() {  return {  parentMessage: 'Hello from parent'  };  },  methods: {  openChildDialog() {  // 通過 $refs 訪問子組件實例，并調用 openDialog 方法打開彈出框  this.$refs.childDialog.openDialog();  },  handleChildEvent(childMessage) {  // 處理子組件傳遞的事件和參數  console.log('Received message from child:', childMessage);  // 可以在這里執行其他邏輯或更新父組件的數據  }  }  
};  
</script>

• 子組件（ChildComponent.vue）：

html

<template>  <div>  <el-dialog :visible.sync="dialogVisible" title="子組件的彈出框">  <p>{{ message }}</p>  </el-dialog>  </div>  
</template>  <script>  
export default {  props: {  initialMessage: {  type: String,  default: ''  }  },  data() {  return {  dialogVisible: false, // 控制彈出框的顯示與隱藏  message: this.initialMessage // 初始化時接收父組件傳遞的參數  };  },  methods: {  openDialog() {  // 打開彈出框，并觸發父組件的事件傳遞參數  this.dialogVisible = true;  this.$emit('child-event', 'Hello from child');  },  closeDialog() {  // 關閉彈出框  this.dialogVisible = false;  }  },  watch: {  initialMessage(newValue) {  // 監聽父組件傳遞的參數變化，并更新子組件的數據  this.message = newValue;  }  }  
};  
</script>

在父組件中，我們使用了ref屬性給子組件指定了一個引用名稱childDialog，并通過:initial-message="parentMessage"將父組件的數據parentMessage傳遞給子組件。同時，在父組件的模板中添加了一個按鈕，當點擊該按鈕時，會觸發openChildDialog方法，通過$ refs訪問子組件實例，并調用子組件的openDialog方法打開彈出框。在父組件的方法handleChildEvent中，我們處理子組件傳遞的事件和參數，并可以在這里執行其他邏輯或更新父組件的數據。在子組件中，我們定義了一個props屬性initialMessage來接收父組件傳遞的參數，并在初始化時將參數賦值給子組件的message數據屬性。子組件的openDialog方法中，我們打開彈出框，并通過$emit觸發一個自定義事件child-event，將參數’Hello from child’傳遞給父組件。同時，我們使用:visible.sync="dialogVisible"來綁定彈出框的顯示狀態。這樣，當dialogVisible的值變化時，彈出框的顯示狀態也會相應地改變。

---

🏫博客主頁：魔王-T

🥝大鵬一日同風起 扶搖直上九萬里

??感謝大家點贊👍收藏?評論??