快捷導(dǎo)航

VUE學(xué)習(xí)寶典之el-dialog使用示例

更新時(shí)間：2024年03月25日 11:51:18 作者：魔王-T

在我工作過(guò)程中使用el-dialog的需求挺多的,也積累了一下使用技巧,這篇文章主要給大家介紹了關(guān)于VUE學(xué)習(xí)寶典之el-dialog使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

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

el-dialog簡(jiǎn)介

el-dialog是一個(gè)非常靈活的彈出框組件，它可以通過(guò)簡(jiǎn)單的配置來(lái)實(shí)現(xiàn)各種樣式的彈出框。el-dialog組件基于Element UI庫(kù)，因此在使用之前需要確保已經(jīng)正確引入了Element UI庫(kù)。

el-dialog屬性

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

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

el-dialog示例

下面是一個(gè)簡(jiǎn)單的el-dialog示例，展示了如何使用屬性和事件來(lái)控制彈出框的行為和樣式：

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

<template>  
  <div>  
    <el-button @click="dialogVisible = true">打開(kāi)彈出框</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>

在腳本中定義數(shù)據(jù)和方法：

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

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

父子組件值傳遞示例

當(dāng)el-dialog組件聲明在子組件中時(shí)，父組件和子組件可以通過(guò)props和事件進(jìn)行相互傳遞參數(shù)。以下是一個(gè)代碼示例：

父組件（ParentComponent.vue）：

html

<template>  
  <div>  
    <child-component ref="childDialog" :initial-message="parentMessage" @child-event="handleChildEvent"></child-component>  
    <el-button @click="openChildDialog">打開(kāi)子組件的彈出框</el-button>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from parent'  
    };  
  },  
  methods: {  
    openChildDialog() {  
      // 通過(guò) $refs 訪問(wèn)子組件實(shí)例，并調(diào)用 openDialog 方法打開(kāi)彈出框  
      this.$refs.childDialog.openDialog();  
    },  
    handleChildEvent(childMessage) {  
      // 處理子組件傳遞的事件和參數(shù)  
      console.log('Received message from child:', childMessage);  
      // 可以在這里執(zhí)行其他邏輯或更新父組件的數(shù)據(jù)  
    }  
  }  
};  
</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 // 初始化時(shí)接收父組件傳遞的參數(shù)  
    };  
  },  
  methods: {  
    openDialog() {  
      // 打開(kāi)彈出框，并觸發(fā)父組件的事件傳遞參數(shù)  
      this.dialogVisible = true;  
      this.$emit('child-event', 'Hello from child');  
    },  
    closeDialog() {  
      // 關(guān)閉彈出框  
      this.dialogVisible = false;  
    }  
  },  
  watch: {  
    initialMessage(newValue) {  
      // 監(jiān)聽(tīng)父組件傳遞的參數(shù)變化，并更新子組件的數(shù)據(jù)  
      this.message = newValue;  
    }  
  }  
};  
</script>

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