element ui 弹出层嵌入网页
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<el-button @click="startHacking">Start</el-button>
</div>
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
fullscreen="true"
title="提示"
:visible.sync="dialogVisible"
width="80%"
height="100%"
:before-close="handleClose">
<span>这是一段信息</span>
<iframe src="https://www.xionggd.com" frameborder="0" width="100%" height="600px"></iframe>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
startHacking() {
this.$notify({
title: 'It works!',
type: 'success',
message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
duration: 5000
})
},
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
alert("确定")
done();
})
.catch(_ => {
alert("取消")
});
}
}
}
</script>
<style>
#app {
font-family: Helvetica, sans-serif;
text-align: center;
}
</style>