Vue是一種前端框架，可以輕松實現單頁面應用程序(SPAs)。本文介紹如何使用Vue實現一個彈出窗口，并使用iframe加載內容。

我們使用Vue和Element UI來實現彈出窗口。首先，我們需要在Vue項目中安裝Element UI。

npm install element-ui --save-dev

安裝完成后，在我們要使用彈出窗口的組件中導入Element UI的相關組件。

<template>
<div>
<el-button type="text" @click="dialogVisible = true">點擊打開彈出窗</el-button>
<el-dialog :visible.sync="dialogVisible" :before-close="beforeCloseDialog">
<iframe :src="dialogUrl" frameborder="0" width="100%" height="100%" allowfullscreen></iframe>
</el-dialog>
</div>
</template>
<script>
import { Dialog } from 'element-ui';
export default {
components: {
[Dialog.name]: Dialog,
},
data() {
return {
dialogVisible: false,
dialogUrl: '',
};
},
methods: {
beforeCloseDialog(done) {
this.dialogVisible = false;
done();
},
},
};
</script>

在上面的代碼中，我們使用了Element UI的Dialog組件。當點擊按鈕時，彈出窗口Dialog會彈出并展示iframe中的內容。我們還使用了iframe組件來加載我們指定的url。

這就是使用Vue和Element UI實現彈出窗口的簡單方法。你可以根據自己的需要在iframe中加載任何URL。