vue elui 写一个 按钮点击 加载一个弹窗 弹窗内容为http://172.16.1.30:9000/#/dashboard 网站
时间: 2023-08-11 18:05:14 浏览: 175
vue-dashboard
你可以使用 Vue 和 Element UI 来实现一个按钮点击后弹出弹窗,并加载指定网站内容的功能。下面是一个示例代码:
```html
<template>
<div>
<el-button type="primary" @click="showDialog">点击加载弹窗</el-button>
<el-dialog :visible.sync="dialogVisible" title="弹窗内容" :close-on-click-modal="false">
<iframe :src="dialogUrl" width="100%" height="500"></iframe>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
dialogUrl: 'http://172.16.1.30:9000/#/dashboard'
};
},
methods: {
showDialog() {
this.dialogVisible = true;
}
}
};
</script>
```
在上面的代码中,我们使用了 Vue 的 `@click` 事件监听器来捕捉按钮点击事件,然后调用 `showDialog` 方法来显示弹窗。弹窗的内容是一个嵌入的 iframe 元素,通过 `:src` 绑定到 `dialogUrl` 变量,即 http://172.16.1.30:9000/#/dashboard 网站的地址。
请注意,这只是一个简单的示例,你可能需要根据自己的需求进行适当的调整和样式设置。
阅读全文