ElementUI作為一款優秀的UI框架，其彈窗組件具有簡便易用、自定義性強等特點，與Vue的結合也非常緊密。在本文中，我們將介紹如何使用Vue和ElementUI的彈窗組件完成彈窗的實現。

首先，我們需要引入Vue和ElementUI:

<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<!-- ElementUI -->
<link rel="stylesheet" >
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

然后，我們需要在Vue實例中注冊ElementUI的彈窗組件:

Vue.use(ElementUI)

現在，我們可以開始編寫彈窗的代碼了。首先，我們需要在Vue的data屬性中定義彈窗的狀態:

data() {
return {
dialogVisible: false
}
}

其中，dialogVisible表示彈窗是否可見。

然后，我們需要編寫彈窗的模板代碼:

<template>
<div>
<el-button @click="dialogVisible = true">打開彈窗</el-button>
<el-dialog v-model="dialogVisible">
<span>這是一個彈窗！</span>
</el-dialog>
</div>
</template>

這里使用了ElementUI的el-button和el-dialog組件，其中v-model綁定了dialogVisible，當dialogVisible為true時，彈窗會顯示。el-button的@click事件綁定了一個函數，當點擊按鈕時，彈窗的顯示狀態會改變。

接下來，我們需要在Vue實例中定義函數來處理彈窗的關閉事件:

methods: {
handleClose() {
this.dialogVisible = false
}
}

這里的handleClose函數將dialogVisible設置為false，即關閉彈窗。

最后，我們需要在el-dialog組件中添加一個關閉按鈕:

<el-dialog v-model="dialogVisible">
<span>這是一個彈窗！</span>
<div slot="footer">
<el-button @click="handleClose">關閉</el-button>
</div>
</el-dialog>

這里使用了ElementUI的el-button組件，并且使用了el-dialog的footer插槽來放置按鈕。@click事件綁定了handleClose函數，當點擊按鈕時，彈窗會關閉。

至此，我們已經完成了彈窗的實現。通過Vue和ElementUI的結合，我們可以快速、簡便地實現各種不同樣式的彈窗。