From c550aa01ccdbf09e59270cfaf07099ff605bc683 Mon Sep 17 00:00:00 2001
From: BeADre <34639100+BeADre@users.noreply.github.com>
Date: Mon, 23 Nov 2020 09:47:23 +0800
Subject: [PATCH] docs(dialog): update dialog docs (#650)

---
 website/docs/en-US/dialog.md | 24 +++++++++---------
 website/docs/es/dialog.md    | 46 ++++++++++++++++++++---------------
 website/docs/fr-FR/dialog.md | 45 +++++++++++++++++++---------------
 website/docs/jp/dialog.md    | 46 ++++++++++++++++++++---------------
 website/docs/zh-CN/dialog.md | 47 +++++++++++++++++++++---------------
 5 files changed, 118 insertions(+), 90 deletions(-)

diff --git a/website/docs/en-US/dialog.md b/website/docs/en-US/dialog.md
index 680b2982fb..24ec158f7d 100644
--- a/website/docs/en-US/dialog.md
+++ b/website/docs/en-US/dialog.md
@@ -58,7 +58,6 @@ The content of Dialog can be anything, even a table or a form. This example show
 :::demo
 
 ```html
-<!-- Table -->
 <el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>
 
 <el-dialog title="Shipping address" v-model="dialogTableVisible">
@@ -84,10 +83,12 @@ The content of Dialog can be anything, even a table or a form. This example show
       </el-select>
     </el-form-item>
   </el-form>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogFormVisible = false">Cancel</el-button>
-    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
-  </span>
+  <template #footer>
+    <span class="dialog-footer">
+      <el-button @click="dialogFormVisible = false">Cancel</el-button>
+      <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
+    </span>
+  </template>
 </el-dialog>
 
 <script>
@@ -148,10 +149,10 @@ If a Dialog is nested in another Dialog, `append-to-body` is required.
       </el-dialog>
     </template>
     <template #footer>
-    <div class="dialog-footer">
-      <el-button @click="outerVisible = false">Cancel</el-button>
-      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
-    </div>
+      <div class="dialog-footer">
+        <el-button @click="outerVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
+      </div>
     </template>
   </el-dialog>
 </template>
@@ -216,16 +217,17 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| visible   | visibility of Dialog, supports the .sync modifier | boolean | — | false |
+| model-value / v-model   | visibility of Dialog | boolean | — | — |
 | title     | title of Dialog. Can also be passed with a named slot (see the following table) | string    | — | — |
 | width     | width of Dialog | string    | — | 50% |
 | fullscreen     | whether the Dialog takes up full screen | boolean    | — | false |
 | top      | value for `margin-top` of Dialog CSS | string    | — | 15vh |
 | modal     | whether a mask is displayed | boolean   | — | true |
-| modal-append-to-body     | whether to append modal to body element. If false, the modal will be appended to Dialog's parent element | boolean   | — | true |
 | append-to-body     | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean   | — | false |
 | lock-scroll     | whether scroll of body is disabled while Dialog is displayed | boolean   | — | true |
 | custom-class      | custom class names for Dialog | string    | — | — |
+| open-delay        | Time(milliseconds) before open | number    | — | 0 |
+| close-delay       | Time(milliseconds) before close | number    | — | 0 |
 | close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean    | — | true |
 | close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean    | — | true |
 | show-close | whether to show a close button | boolean    | — | true |
diff --git a/website/docs/es/dialog.md b/website/docs/es/dialog.md
index a27c2a4965..3c6be0d60a 100644
--- a/website/docs/es/dialog.md
+++ b/website/docs/es/dialog.md
@@ -61,10 +61,9 @@ El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formu
 :::demo
 
 ```html
-<!-- Table -->
 <el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>
 
-<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">
+<el-dialog title="Shipping address" v-model="dialogTableVisible">
   <el-table :data="gridData">
     <el-table-column property="date" label="Date" width="150"></el-table-column>
     <el-table-column property="name" label="Name" width="200"></el-table-column>
@@ -75,7 +74,7 @@ El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formu
 <!-- Form -->
 <el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>
 
-<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">
+<el-dialog title="Shipping address" v-model="dialogFormVisible">
   <el-form :model="form">
     <el-form-item label="Promotion name" :label-width="formLabelWidth">
       <el-input v-model="form.name" autocomplete="off"></el-input>
@@ -87,10 +86,12 @@ El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formu
       </el-select>
     </el-form-item>
   </el-form>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogFormVisible = false">Cancel</el-button>
-    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
-  </span>
+  <template #footer>
+    <span class="dialog-footer">
+      <el-button @click="dialogFormVisible = false">Cancel</el-button>
+      <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
+    </span>
+  </template>
 </el-dialog>
 
 <script>
@@ -143,17 +144,19 @@ Si un diálogo está anidado en otro diálogo, se requiere append-to-body.
 <template>
   <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
 
-  <el-dialog title="Outer Dialog" :visible.sync="outerVisible">
+  <el-dialog title="Outer Dialog" v-model="outerVisible">
     <el-dialog
         width="30%"
         title="Inner Dialog"
-        :visible.sync="innerVisible"
+        v-model="innerVisible"
         append-to-body>
     </el-dialog>
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="outerVisible = false">Cancel</el-button>
-      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
-    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="outerVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
+      </div>
+    </template>
   </el-dialog>
 </template>
 
@@ -180,14 +183,16 @@ El contenido de Diálogo se puede centrar.
 
 <el-dialog
   title="Warning"
-  :visible.sync="centerDialogVisible"
+  v-model="centerDialogVisible"
   width="30%"
   center>
   <span>It should be noted that the content will not be aligned in center by default</span>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click="centerDialogVisible = false">Cancel</el-button>
-    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
-  </span>
+  <template #footer>
+    <span class="dialog-footer">
+      <el-button @click="centerDialogVisible = false">Cancel</el-button>
+      <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
+    </span>
+  </template>
 </el-dialog>
 
 <script>
@@ -216,16 +221,17 @@ Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no pu
 
 | Atributo              | Descripción                              | Tipo                                     | Valores aceptados | Por defecto |
 | --------------------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
-| visible               | visibilidad del Diálogo, apoya el modificador .sync | boolean                                  | —                 | false       |
+| model-value / v-model               | visibilidad del Diálogo | boolean                                  | —                 | —       |
 | title                 | título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente) | string                                   | —                 | —           |
 | width                 | anchura de Diálogo                       | string                                   | —                 | 50%         |
 | fullscreen            | si el diálogo ocupa pantalla completa    | boolean                                  | —                 | false       |
 | top                   | valor de `margin-top` del Diálogo CSS    | string                                   | —                 | 15vh        |
 | modal                 | si se muestra una máscara                | boolean                                  | —                 | true        |
-| modal-append-to-body  | si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo | boolean                                  | —                 | true        |
 | append-to-body        | Si adjuntar el cuadro de diálogo al cuerpo | boolean                                  | —                 | false       |
 | lock-scroll           | Si el scroll del cuerpo está desactivado mientras se muestra el cuadro de diálogo | boolean                                  | —                 | true        |
 | custom-class          | nombres de clase personalizada para el Diálogo | string                                   | —                 | —           |
+| open-delay            | Tiempo (milisegundos) antes de abierto | number    | — | 0 |
+| close-delay           | Tiempo (milisegundos) antes de cierre | number    | — | 0 |
 | close-on-click-modal  | si el Diálogo puede ser cerrado haciendo clic en la máscara | boolean                                  | —                 | true        |
 | close-on-press-escape | si el Diálogo puede ser cerrado presionando ESC | boolean                                  | —                 | true        |
 | show-close            | si mostrar un botón de cerrar            | boolean                                  | —                 | true        |
diff --git a/website/docs/fr-FR/dialog.md b/website/docs/fr-FR/dialog.md
index 29ca0bd6ef..9e5689b7aa 100644
--- a/website/docs/fr-FR/dialog.md
+++ b/website/docs/fr-FR/dialog.md
@@ -60,7 +60,7 @@ Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.
 <!-- Table -->
 <el-button type="text" @click="dialogTableVisible = true">Ouvrir un modal avec tableau</el-button>
 
-<el-dialog title="Adresse d'expédition" :visible.sync="dialogTableVisible">
+<el-dialog title="Adresse d'expédition" v-model="dialogTableVisible">
   <el-table :data="gridData">
     <el-table-column property="date" label="Date" width="150"></el-table-column>
     <el-table-column property="name" label="Nom" width="200"></el-table-column>
@@ -71,7 +71,7 @@ Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.
 <!-- Form -->
 <el-button type="text" @click="dialogFormVisible = true">Ouvrir un modal avec formulaire</el-button>
 
-<el-dialog title="Adresse d'expédition" :visible.sync="dialogFormVisible">
+<el-dialog title="Adresse d'expédition" v-model="dialogFormVisible">
   <el-form :model="form">
     <el-form-item label="Nom de promotion" :label-width="formLabelWidth">
       <el-input v-model="form.name" autocomplete="off"></el-input>
@@ -83,10 +83,12 @@ Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.
       </el-select>
     </el-form-item>
   </el-form>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogFormVisible = false">Annuler</el-button>
-    <el-button type="primary" @click="dialogFormVisible = false">Confirmer</el-button>
-  </span>
+  <template #footer>
+    <span class="dialog-footer">
+      <el-button @click="dialogFormVisible = false">Annuler</el-button>
+      <el-button type="primary" @click="dialogFormVisible = false">Confirmer</el-button>
+    </span>
+  </template>    
 </el-dialog>
 
 <script>
@@ -139,17 +141,19 @@ Si un Dialog est imbriqué dans un autre Dialog, `append-to-body` est requis.
 <template>
   <el-button type="text" @click="outerVisible = true">Ouvrir le modal extérieur</el-button>
 
-  <el-dialog title="Modal extérieur" :visible.sync="outerVisible">
+  <el-dialog title="Modal extérieur" v-model="outerVisible">
     <el-dialog
         width="30%"
         title="Modal intérieur"
-        :visible.sync="innerVisible"
+        v-model="innerVisible"
         append-to-body>
     </el-dialog>
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="outerVisible = false">Annuler</el-button>
-      <el-button type="primary" @click="innerVisible = true">Ouvrir le modal intérieur</el-button>
-    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="outerVisible = false">Annuler</el-button>
+        <el-button type="primary" @click="innerVisible = true">Ouvrir le modal intérieur</el-button>
+      </div>
+    </template>
   </el-dialog>
 </template>
 
@@ -177,14 +181,16 @@ Le contenu du modal peut être centré.
 
 <el-dialog
   title="Attention"
-  :visible.sync="centerDialogVisible"
+  v-model="centerDialogVisible"
   width="30%"
   center>
   <span>Le contenu du modal n'est pas centré par défaut.</span>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click="centerDialogVisible = false">Annuler</el-button>
-    <el-button type="primary" @click="centerDialogVisible = false">Confirmer</el-button>
-  </span>
+  <template #footer>
+    <span class="dialog-footer">
+      <el-button @click="centerDialogVisible = false">Annuler</el-button>
+      <el-button type="primary" @click="centerDialogVisible = false">Confirmer</el-button>
+    </span>
+  </template>
 </el-dialog>
 
 <script>
@@ -211,16 +217,17 @@ Si la variable liée à `visible` est gérée dans Vuex, le modificateur `.sync`
 
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| visible   | Visibilité du Dialog, supporte le modificateur .sync. | boolean | — | false |
+| model-value / v-model   | Visibilité du Dialog | boolean | — | — |
 | title     | Titre du Dialog. Peut aussi être passé via un slot (voir la table suivante). | string    | — | — |
 | width     | Largeur du Dialog. | string    | — | 50% |
 | fullscreen     | Si le Dialog doit être en plein écran. | boolean    | — | false |
 | top      | Valeur du `margin-top` du CSS du Dialog. | string    | — | 15vh |
 | modal     | Si un masque est affiché. | boolean   | — | true |
-| modal-append-to-body     | S'il faut ajouter le modal au body. Si `false`, le modal sera ajouter à l'élément parent du Dialog. | boolean   | — | true |
 | append-to-body     | S'il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à `true`. | boolean   | — | false |
 | lock-scroll     | Si le défilement du body est désactivé. | boolean   | — | true |
 | custom-class      | Nom de classe pour le Dialog | string    | — | — |
+| open-delay        | Temps (millisecondes) avant la ouvert | number    | — | 0 |
+| close-delay       | Temps (millisecondes) avant la proche | number    | — | 0 |
 | close-on-click-modal | Si le Dialog peut être fermé en cliquant sur le masque. | boolean    | — | true |
 | close-on-press-escape | Si le Dialog peut être fermé en appuyant sur Echap. | boolean    | — | true |
 | show-close | Si le bouton de fermeture doit apparaître. | boolean    | — | true |
diff --git a/website/docs/jp/dialog.md b/website/docs/jp/dialog.md
index ae9ac0ef6a..30ba772cd3 100644
--- a/website/docs/jp/dialog.md
+++ b/website/docs/jp/dialog.md
@@ -55,10 +55,9 @@ dialog の内容は何でも構いません、テーブルやフォームであ
 :::demo
 
 ```html
-<!-- Table -->
 <el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>
 
-<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">
+<el-dialog title="Shipping address" v-model="dialogTableVisible">
   <el-table :data="gridData">
     <el-table-column property="date" label="Date" width="150"></el-table-column>
     <el-table-column property="name" label="Name" width="200"></el-table-column>
@@ -69,7 +68,7 @@ dialog の内容は何でも構いません、テーブルやフォームであ
 <!-- Form -->
 <el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>
 
-<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">
+<el-dialog title="Shipping address" v-model="dialogFormVisible">
   <el-form :model="form">
     <el-form-item label="Promotion name" :label-width="formLabelWidth">
       <el-input v-model="form.name" autocomplete="off"></el-input>
@@ -81,10 +80,12 @@ dialog の内容は何でも構いません、テーブルやフォームであ
       </el-select>
     </el-form-item>
   </el-form>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogFormVisible = false">Cancel</el-button>
-    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
-  </span>
+  <template #footer>
+    <span class="dialog-footer">
+      <el-button @click="dialogFormVisible = false">Cancel</el-button>
+      <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
+    </span>
+  </template>
 </el-dialog>
 
 <script>
@@ -135,17 +136,19 @@ dialog の内容は何でも構いません、テーブルやフォームであ
 <template>
   <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
 
-  <el-dialog title="Outer Dialog" :visible.sync="outerVisible">
+  <el-dialog title="Outer Dialog" v-model="outerVisible">
     <el-dialog
         width="30%"
         title="Inner Dialog"
-        :visible.sync="innerVisible"
+        v-model="innerVisible"
         append-to-body>
     </el-dialog>
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="outerVisible = false">Cancel</el-button>
-      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
-    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="outerVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
+      </div>
+    </template>
   </el-dialog>
 </template>
 
@@ -172,14 +175,16 @@ dialogの内容を中央揃えにすることができます。
 
 <el-dialog
   title="Warning"
-  :visible.sync="centerDialogVisible"
+  v-model="centerDialogVisible"
   width="30%"
   center>
   <span>It should be noted that the content will not be aligned in center by default</span>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click="centerDialogVisible = false">Cancel</el-button>
-    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
-  </span>
+  <template #footer>
+    <span class="dialog-footer">
+      <el-button @click="centerDialogVisible = false">Cancel</el-button>
+      <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
+    </span>
+  </template>
 </el-dialog>
 
 <script>
@@ -207,16 +212,17 @@ Vuexストアで `visible` にバインドされた変数を管理している
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| visible   | dialogの可視性、.sync 修飾子をサポートしています。 | boolean | — | false |
+| model-value / v-model   | dialogの可視性 | boolean | — | — |
 | title     | dialogのタイトルを指定します。名前付きスロットで渡すこともできます (次のテーブルを参照してください)。 | string    | — | — |
 | width     | dialogの幅 | string    | — | 50% |
 | fullscreen     | dialogが全画面を占めるかどうか | boolean    | — | false |
 | top      | dialogCSSの `margin-top` の値 | string    | — | 15vh |
 | modal     | マスクが表示されているかどうか | boolean   | — | true |
-| modal-append-to-body     | モーダルを ボディ要素に追加するかどうかを指定します。false の場合、モーダルはdialogの親要素に追加されます。 | boolean   | — | true |
 | append-to-body     | dialog自身をボディに追加するかどうかを指定します。入れ子になったdialogは、この属性を `true` に設定しなければなりません。 | boolean   | — | false |
 | lock-scroll     | dialog表示中にボディのスクロールを無効にするかどうか | boolean   | — | true |
 | custom-class      | dialog用のカスタムクラス名 | string    | — | — |
+| open-delay        | Time(milliseconds) before open | number    | — | 0 |
+| close-delay       | Time(milliseconds) before close | number    | — | 0 |
 | close-on-click-modal | マスクをクリックしてdialogを閉じることができるかどうか | boolean    | — | true |
 | close-on-press-escape | ESC を押してdialogを閉じることができるかどうか | boolean    | — | true |
 | show-close | 閉じるボタンを表示するかどうか | boolean    | — | true |
diff --git a/website/docs/zh-CN/dialog.md b/website/docs/zh-CN/dialog.md
index a983b8e320..716d90be84 100644
--- a/website/docs/zh-CN/dialog.md
+++ b/website/docs/zh-CN/dialog.md
@@ -55,10 +55,9 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 
 :::demo
 ```html
-<!-- Table -->
 <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
 
-<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
+<el-dialog title="收货地址" v-model="dialogTableVisible">
   <el-table :data="gridData">
     <el-table-column property="date" label="日期" width="150"></el-table-column>
     <el-table-column property="name" label="姓名" width="200"></el-table-column>
@@ -69,7 +68,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 <!-- Form -->
 <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
 
-<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
+<el-dialog title="收货地址" v-model="dialogFormVisible">
   <el-form :model="form">
     <el-form-item label="活动名称" :label-width="formLabelWidth">
       <el-input v-model="form.name" autocomplete="off"></el-input>
@@ -81,10 +80,12 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
       </el-select>
     </el-form-item>
   </el-form>
-  <div slot="footer" class="dialog-footer">
-    <el-button @click="dialogFormVisible = false">取 消</el-button>
-    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
-  </div>
+  <template #footer>
+    <span class="dialog-footer">
+      <el-button @click="dialogFormVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+    </span>
+  </template>
 </el-dialog>
 
 <script>
@@ -135,17 +136,19 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 <template>
   <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
 
-  <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
+  <el-dialog title="外层 Dialog" v-model="outerVisible">
     <el-dialog
       width="30%"
       title="内层 Dialog"
-      :visible.sync="innerVisible"
+      v-model="innerVisible"
       append-to-body>
     </el-dialog>
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="outerVisible = false">取 消</el-button>
-      <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
-    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="outerVisible = false">取 消</el-button>
+        <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
+      </div>
+    </template>
   </el-dialog>
 </template>
 
@@ -173,14 +176,17 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 
 <el-dialog
   title="提示"
-  :visible.sync="centerDialogVisible"
+  v-model="centerDialogVisible"
   width="30%"
   center>
   <span>需要注意的是内容是默认不居中的</span>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click="centerDialogVisible = false">取 消</el-button>
-    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
-  </span>
+  <template #footer>
+    <span class="dialog-footer">
+      <el-button @click="centerDialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+    </span>
+  </template> 
+  
 </el-dialog>
 
 <script>
@@ -206,16 +212,17 @@ Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| visible   | 是否显示 Dialog，支持 .sync 修饰符 | boolean | — | false |
+| model-value / v-model   | 是否显示 Dialog | boolean | — | — |
 | title     | Dialog 的标题，也可通过具名 slot （见下表）传入 | string    | — | — |
 | width     | Dialog 的宽度 | string    | — | 50% |
 | fullscreen     | 是否为全屏 Dialog | boolean    | — | false |
 | top       | Dialog CSS 中的 margin-top 值 | string | — | 15vh |
 | modal     | 是否需要遮罩层   | boolean   | — | true |
-| modal-append-to-body     | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上   | boolean   | — | true |
 | append-to-body     | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true   | boolean   | — | false |
 | lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
 | custom-class      | Dialog 的自定义类名 | string    | — | — |
+| open-delay      | Dialog 打开的延时时间，单位毫秒 | number    | — | 0 |
+| close-delay      | Dialog 关闭的延时时间，单位毫秒 | number    | — | 0 |
 | close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean    | — | true |
 | close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean    | — | true |
 | show-close | 是否显示关闭按钮 | boolean    | — | true |