docs(components): update Dialog (#19200)

* docs(components): update Dialog

add fullscreen, modal, events, slot

* docs(components): update text

---------

Co-authored-by: btea <2356281422@qq.com>

docs/en-US/component/dialog.md

@@ -105,6 +105,39 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
 
 :::
 
+## Fullscreen
+
+Set the `fullscreen` attribute to open fullscreen dialog.
+
+:::demo
+dialog/fullscreen
+
+:::
+
+:::tip
+
+If `fullscreen` is true, `width` `top` `draggable` attributes don't work.
+
+:::
+
+## Modal
+
+Setting `modal` to `false` will hide modal (overlay) of dialog.
+
+:::demo
+dialog/modal
+
+:::
+
+## Events
+
+Open developer console (ctrl + shift + J), to see order of events.
+
+:::demo
+dialog/events
+
+:::
+
 ## API
 
 ### Attributes
@@ -147,7 +180,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
 
 | Name                | Description                                                                                           |
 | ------------------- | ----------------------------------------------------------------------------------------------------- |
-| —                   | content of Dialog                                                                                     |
+| default             | default content of Dialog                                                                             |
 | header              | content of the Dialog header; Replacing this removes the title, but does not remove the close button. |
 | footer              | content of the Dialog footer                                                                          |
 | title ^(deprecated) | works the same as the header slot. Use that instead.                                                  |

docs/examples/dialog/events.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-button plain @click="dialogVisible = true">
+    Open the event Dialog
+  </el-button>
+
+  <el-dialog
+    v-model="dialogVisible"
+    modal-class="overide-animation"
+    :before-close="
+      (doneFn) => {
+        console.log('before-close'), doneFn()
+      }
+    "
+    @open="console.log('open')"
+    @open-auto-focus="console.log('open-auto-focus')"
+    @opened="console.log('opened')"
+    @close="console.log('close')"
+    @close-auto-focus="console.log('close-auto-focus')"
+    @closed="console.log('closed')"
+  >
+    <span>It's a event Dialog</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          Confirm
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const dialogVisible = ref(false)
+</script>
+
+<style lang="scss">
+.dialog-fade-enter-active {
+  animation: modal-fade-in 2s;
+  .el-overlay-dialog {
+    animation: dialog-fade-in 2s;
+  }
+}
+
+.dialog-fade-leave-active {
+  animation: modal-fade-out 2s;
+  .el-overlay-dialog {
+    animation: dialog-fade-out 2s;
+  }
+}
+</style>

docs/examples/dialog/fullscreen.vue

@@ -0,0 +1,29 @@
+<template>
+  <el-button plain @click="dialogVisible = true">
+    Open the fullscreen Dialog
+  </el-button>
+
+  <el-dialog
+    v-model="dialogVisible"
+    fullscreen
+    top="40vh"
+    width="70%"
+    draggable
+  >
+    <span>It's a fullscreen Dialog</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          Confirm
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const dialogVisible = ref(false)
+</script>

docs/examples/dialog/modal.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-button plain @click="dialogVisible = true">
+    Open the modal Dialog
+  </el-button>
+
+  <el-dialog v-model="dialogVisible" :modal="false">
+    <span>It's a modal Dialog</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          Confirm
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const dialogVisible = ref(false)
+</script>