VUE3 el-dialog 铺满全屏

要使VUE3 el-dialog铺满全屏，可以使用以下样式：

<style lang="scss" scoped>
.custom_dialog {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

.custom_dialog_header {
  display: flex;
  justify-content: space-between;
}

.custom_dialog_menu {
  padding: 4px 30px 0 0;
}

.custom_dialog_menu i {
  color: #909399;
  font-size: 15px;
}

.el-icon-full-screen {
  cursor: pointer;
}
</style>

然后在el-dialog标签上添加一个class名为custom_dialog即可：

<el-dialog
  class="custom_dialog"
  ...
>
...
</el-dialog>

相关问题

实现el-dialog的拖拽，全屏，缩小功能

要实现el-dialog的拖拽、全屏和缩小功能可以通过以下步骤：

1. 引入Element UI库和Vue.js库。

2. 在需要使用el-dialog的Vue组件中添加el-dialog标签，并设置相应的属性，如可拖拽属性“:draggable='true'”等。

3. 在el-dialog的标题栏中添加相应的按钮，用于实现全屏和缩小功能，例如：

<template slot="title">
    <div class="dialog-title">
        <span>Dialog Title</span>
        <div class="dialog-btns">
            <i class="el-icon-full-screen" @click="fullScreen"></i>
            <i class="el-icon-minus" @click="minimize"></i>
        </div>
    </div>
</template>

4. 在Vue组件中添加相应的方法，用于实现全屏和缩小功能。例如：

methods: {
    fullScreen() {
        // 获取当前el-dialog的父元素
        const parent = this.$el.parentNode;
        // 将父元素的类名改为fullscreen，实现全屏效果
        parent.classList.add('fullscreen');
    },
    minimize() {
        // 获取当前el-dialog的父元素
        const parent = this.$el.parentNode;
        // 将父元素的类名改为minimized，实现缩小效果
        parent.classList.add('minimized');
    }
}

5. 在CSS中添加相应的样式，用于实现全屏和缩小效果。例如：

/* 全屏效果 */
.fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
}

/* 缩小效果 */
.minimized {
    width: 200px !important;
    height: 50px !important;
    left: calc(100% - 200px) !important;
    top: calc(100% - 50px) !important;
}

以上就是实现el-dialog的拖拽、全屏和缩小功能的步骤。

element ui 的showdialog和el-dialog

Element UI是一套基于Vue.js的UI组件库，其中包含了很多常用的UI组件，其中包括了showdialog和el-dialog。

showdialog是Element UI中的一个方法，用于显示一个对话框。它接受一个配置对象作为参数，可以设置对话框的标题、内容、按钮等属性。通过调用showdialog方法，可以在页面上弹出一个对话框，用户可以进行交互操作。

el-dialog是Element UI中的一个对话框组件，它提供了一个弹出式的对话框窗口。el-dialog组件可以通过设置visible属性来控制对话框的显示与隐藏。同时，el-dialog还提供了一些其他属性，如title、width、fullscreen等，用于设置对话框的标题、宽度、是否全屏等样式。

使用Element UI的showdialog方法和el-dialog组件可以方便地实现页面上的对话框功能，提升用户交互体验。