el-dialog在新网页中打开
时间: 2023-02-07 13:57:19 浏览: 711
el-dialog 是一个基于 Vue.js 的弹出对话框组件。如果你想在新网页中打开 el-dialog,你可以使用 window.open() 方法打开一个新的网页,并在新网页中展示 el-dialog。
例如:
```
let dialogWindow = window.open('', 'DialogWindow');
// 在新网页中展示 el-dialog
dialogWindow.showDialog();
```
但是,注意这种方法可能会被浏览器拦截,因为浏览器可能会禁止网页自动打开新窗口。
相关问题
在el-dialog中打开 el-dialog 去掉遮罩层后先打开的el-dialog不能操作
在el-dialog中打开el-dialog后,如果去掉了遮罩层,那么先打开的el-dialog将无法操作。为了解决这个问题,可以在新打开的el-dialog中设置`append-to-body="true"`。这样可以将el-dialog的DOM元素直接添加到body中,避免了嵌套的问题,使得先打开的el-dialog可以正常操作。
具体代码如下:
```html
<template>
<el-dialog title="表单" :close-on-click-modal="false" width="80%" :append-to-body="true" :visible.sync="visible">
<!-- el-dialog的内容 -->
</el-dialog>
</template>
```
这样设置后,先打开的el-dialog就可以正常操作了。
vue中在el-dialog中再打开一个el-dialog
在Vue中,在el-dialog中再打开一个el-dialog可以通过嵌套组件的方式来实现。
具体实现方法如下:
1. 创建一个弹窗组件,例如MyDialog,用于显示一个el-dialog。
2. 在MyDialog组件中,添加一个插槽用于显示弹窗内容,并在插槽中使用el-dialog组件来实现弹窗的显示和隐藏。
例如,在MyDialog组件中实现一个弹窗:
```
<template>
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @close="onClose">
<slot></slot>
<el-dialog v-if="showChildDialog" :visible.sync="childDialogVisible" @close="onChildDialogClose">
<div>子弹窗内容</div>
</el-dialog>
</el-dialog>
</template>
<script>
export default {
props: {
dialogTitle: String
},
data() {
return {
dialogVisible: true,
showChildDialog: false,
childDialogVisible: false
}
},
methods: {
onClose() {
this.$emit('close');
},
onChildDialogClose() {
this.showChildDialog = false;
}
}
}
</script>
```
在上面的代码中,使用了el-dialog组件来实现弹窗的显示和隐藏,同时添加了一个插槽用于显示弹窗内容。在插槽中,再次使用el-dialog组件来实现子弹窗的显示和隐藏。
3. 在需要打开弹窗的地方,引入MyDialog组件,并通过v-if或v-show指令来控制弹窗的显示和隐藏。
例如,在父组件中引入MyDialog组件并打开弹窗:
```
<template>
<div>
<button @click="showDialog = true">打开弹窗</button>
<my-dialog v-if="showDialog" :dialogTitle="dialogTitle" @close="showDialog = false">
<div>
弹窗内容
<button @click="showChildDialog = true">打开子弹窗</button>
</div>
</my-dialog>
</div>
</template>
<script>
import MyDialog from './MyDialog.vue'
export default {
components: {
MyDialog
},
data() {
return {
showDialog: false,
dialogTitle: '弹窗标题'
}
}
}
</script>
```
在上面的代码中,通过v-if指令来控制弹窗的显示和隐藏,使用了MyDialog组件,并传递了相应的props和事件。
通过以上步骤,就可以在一个el-dialog中再打开一个el-dialog了。注意,在嵌套的el-dialog中,需要使用v-if或v-show指令来控制显示和隐藏,并在组件中添加相应的事件来关闭弹窗。