這里給大家分享一個關于Vue ElementUI的例子。我們將通過這個例子學習如何使用ElementUI這個庫來構建一個彈框組件。

我們首先需要引入ElementUI的樣式和腳本文件。

接下來，我們可以創建我們的Vue組件。

<template>
<div>
<el-button type="primary" @click="showDialog = true">顯示彈框</el-button>
<el-dialog v-model="showDialog" title="Hello World" @closed="dialogClosed">
<p>這是一個Vue組件</p>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
showDialog: false
}
},
methods: {
dialogClosed() {
this.showDialog = false;
}
}
}
</script>

在這個組件中，我們使用了ElementUI的Button和Dialog組件來顯示一個彈框。當用戶點擊按鈕時，我們將showDialog屬性設置為true，彈框將被顯示出來。當彈框被關閉時，我們將showDialog屬性設置回false，彈框將被隱藏。

現在我們已經完成了一個基本的彈框組件，可以在我們的Vue項目中使用。