From c883e6c192c1672931bafbb8bf167db38e5c751c Mon Sep 17 00:00:00 2001
From: Otto <web@ijust.cc>
Date: Wed, 11 Aug 2021 16:53:58 +0800
Subject: [PATCH] docs(drawer): add drawer props desc (#2855)

* docs(drawer): add drawer props desc

* docs: add i18n drawer docs

* docs(drawer): add new line.
---
 website/docs/en-US/drawer.md | 15 ++++++++++-----
 website/docs/es/drawer.md    | 16 +++++++++++-----
 website/docs/fr-FR/drawer.md | 15 ++++++++++-----
 website/docs/jp/drawer.md    | 16 +++++++++++-----
 website/docs/zh-CN/drawer.md |  8 +++++++-
 5 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/website/docs/en-US/drawer.md b/website/docs/en-US/drawer.md
index 6e45fc5d67..d3359842dc 100644
--- a/website/docs/en-US/drawer.md
+++ b/website/docs/en-US/drawer.md
@@ -59,7 +59,7 @@ Callout a temporary drawer, from multiple direction
 
   export default defineComponent({
     setup() {
-      
+
       const drawer = ref(false);
       const direction = ref('rtl');
       const handleClose = (done) => {
@@ -243,12 +243,12 @@ export default {
 <!--
 <setup>
 
-import {defineComponent, reactive, toRefs } from 'vue'; 
-import { ElMessageBox } from 'element-plus'; 
+import {defineComponent, reactive, toRefs } from 'vue';
+import { ElMessageBox } from 'element-plus';
 
   export default defineComponent({
     setup() {
-      
+
       const state = reactive({
         table: false,
         dialog: false,
@@ -381,7 +381,7 @@ You can also have multiple layer of `Drawer` just like `Dialog`.
 
   export default defineComponent({
     setup() {
-      
+
       const drawer = ref(false);
       const innerDrawer = ref(false);
       const handleClose = (done) => {
@@ -426,8 +426,12 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | model-value / v-model | Should Drawer be displayed | boolean | — | false |
 | append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean   | — | false |
+| lock-scroll     | whether scroll of body is disabled while Drawer is displayed | boolean   | — | true |
 | before-close | If set, closing procedure will be halted | function(done) (done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure) | — | — |
+| close-on-click-modal | whether the Drawer can be closed by clicking the mask | boolean    | — | true |
 | close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
+| open-delay        | Time(milliseconds) before open | number    | — | 0 |
+| close-delay       | Time(milliseconds) before close | number    | — | 0 |
 | custom-class | Extra class names for Drawer | string | — | — |
 | destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
 | modal | Should show shadowing layer | boolean | — | true |
@@ -437,6 +441,7 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
 | title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
 | withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
 | modal-class | Extra class names for shadowing layer | string | - | - |
+| z-index | set z-index | number | - | - |
 
 ### Drawer Slots
 
diff --git a/website/docs/es/drawer.md b/website/docs/es/drawer.md
index 1a03102f23..78bd868a60 100644
--- a/website/docs/es/drawer.md
+++ b/website/docs/es/drawer.md
@@ -60,7 +60,7 @@ Llamada de un drawer temporal, desde varias direcciones
 
   export default defineComponent({
     setup() {
-      
+
       const drawer = ref(false);
       const direction = ref('rtl');
       const handleClose = (done) => {
@@ -244,12 +244,12 @@ export default {
 <!--
 <setup>
 
-import {defineComponent, reactive, toRefs } from 'vue'; 
-import { ElMessageBox } from 'element-plus'; 
+import {defineComponent, reactive, toRefs } from 'vue';
+import { ElMessageBox } from 'element-plus';
 
   export default defineComponent({
     setup() {
-      
+
       const state = reactive({
         table: false,
         dialog: false,
@@ -382,7 +382,7 @@ También puede tener varias capas de `Drawer` al igual que con `Dialog`.
 
   export default defineComponent({
     setup() {
-      
+
       const drawer = ref(false);
       const innerDrawer = ref(false);
       const handleClose = (done) => {
@@ -426,8 +426,12 @@ El Drawer proporciona una API llamada "destroyOnClose", que es una variable de b
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | model-value / v-model | Si se muestra el Drawer | boolean | — | false |
 | append-to-body | Los controles deberían insertar Drawer en el elemento DocumentBody, los Drawer anidados deben asignar este parámetro a **true** | boolean   | — | false |
+| lock-scroll     | whether scroll of body is disabled while Drawer is displayed | boolean   | — | true |
 | before-close | Si está configurado, el procedimiento de cierre se detendrá. | function(done), done es un tipo de función que acepta un booleano como parámetro, una llamada hecha con true o sin parámetro abortará el procedimiento de cierre. | — | — |
+| close-on-click-modal | whether the Drawer can be closed by clicking the mask | boolean    | — | true |
 | close-on-press-escape | Indica si el Drawer puede cerrarse pulsando ESC | boolean | — | true |
+| open-delay        | Time(milliseconds) before open | number    | — | 0 |
+| close-delay       | Time(milliseconds) before close | number    | — | 0 |
 | custom-class | Nombre extra de clase para  Drawer | string | — | — |
 | destroy-on-close | Indica si los children deben ser destruidos después de cerrar el Drawer. | boolean | - | false |
 | modal | Mostrará una capa de sombra | boolean | — | true |
@@ -437,6 +441,8 @@ El Drawer proporciona una API llamada "destroyOnClose", que es una variable de b
 | title | El título del Drawer, también se puede establecer por slot con nombre, las descripciones detalladas se pueden encontrar en el formulario de slot. | string | — | — |
 | withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
 | modal-class | Nombre extra de clase para capa de sombra | string | - | - |
+| z-index | set z-index | number | - | - |
+
 
 ### Drawer Slot's
 
diff --git a/website/docs/fr-FR/drawer.md b/website/docs/fr-FR/drawer.md
index d6179bc0ad..8959781636 100644
--- a/website/docs/fr-FR/drawer.md
+++ b/website/docs/fr-FR/drawer.md
@@ -59,7 +59,7 @@ Callout a temporary drawer, from multiple direction
 
   export default defineComponent({
     setup() {
-      
+
       const drawer = ref(false);
       const direction = ref('rtl');
       const handleClose = (done) => {
@@ -243,12 +243,12 @@ export default {
 <!--
 <setup>
 
-import {defineComponent, reactive, toRefs } from 'vue'; 
-import { ElMessageBox } from 'element-plus'; 
+import {defineComponent, reactive, toRefs } from 'vue';
+import { ElMessageBox } from 'element-plus';
 
   export default defineComponent({
     setup() {
-      
+
       const state = reactive({
         table: false,
         dialog: false,
@@ -381,7 +381,7 @@ You can also have multiple layer of `Drawer` just like `Dialog`.
 
   export default defineComponent({
     setup() {
-      
+
       const drawer = ref(false);
       const innerDrawer = ref(false);
       const handleClose = (done) => {
@@ -425,8 +425,12 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | model-value / v-model | Should Drawer be displayed | boolean | — | false |
 | append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean   | — | false |
+| lock-scroll     | whether scroll of body is disabled while Drawer is displayed | boolean   | — | true |
 | before-close | If set, closing procedure will be halted | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
+| close-on-click-modal | whether the Drawer can be closed by clicking the mask | boolean    | — | true |
 | close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
+| open-delay        | Time(milliseconds) before open | number    | — | 0 |
+| close-delay       | Time(milliseconds) before close | number    | — | 0 |
 | custom-class | Extra class names for Drawer | string | — | — |
 | destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
 | modal | Should show shadowing layer | boolean | — | true |
@@ -436,6 +440,7 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
 | title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
 | withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
 | modal-class | Extra class names for shadowing layer | string | - | -
+| z-index | set z-index | number | - | - |
 
 ### Drawer Slot
 
diff --git a/website/docs/jp/drawer.md b/website/docs/jp/drawer.md
index 4eded251ec..b0130fa4ff 100644
--- a/website/docs/jp/drawer.md
+++ b/website/docs/jp/drawer.md
@@ -60,7 +60,7 @@ Since v-model is natively supported for all components, `visible.sync` has been
 
   export default defineComponent({
     setup() {
-      
+
       const drawer = ref(false);
       const direction = ref('rtl');
       const handleClose = (done) => {
@@ -244,12 +244,12 @@ export default {
 <!--
 <setup>
 
-import {defineComponent, reactive, toRefs } from 'vue'; 
-import { ElMessageBox } from 'element-plus'; 
+import {defineComponent, reactive, toRefs } from 'vue';
+import { ElMessageBox } from 'element-plus';
 
   export default defineComponent({
     setup() {
-      
+
       const state = reactive({
         table: false,
         dialog: false,
@@ -382,7 +382,7 @@ import { ElMessageBox } from 'element-plus';
 
   export default defineComponent({
     setup() {
-      
+
       const drawer = ref(false);
       const innerDrawer = ref(false);
       const handleClose = (done) => {
@@ -426,8 +426,12 @@ Drawerは `destroyOnClose` というAPIを提供しています。これはフ
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | model-value / v-model | Drawerを表示する場合は、 | boolean | — | false |
 | append-to-body | DrawerがDocumentBody要素に挿入されている場合のコントロールは、ネストされたDrawerはこのパラメータを**true**に割り当てなければなりません。| boolean   | — | false |
+| lock-scroll     | Drawer 表示中にボディのスクロールを無効にするかどうか | boolean   | — | true |
 | before-close | 設定されている場合は、終了処理を停止します。 | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
+| close-on-click-modal | Drawer を閉じることができるかどうか | boolean    | — | true |
 | close-on-press-escape | ESC を押してDrawerを閉じることができるかどうかを示す。 | boolean | — | true |
+| open-delay        | Time(milliseconds) before open | number    | — | 0 |
+| close-delay       | Time(milliseconds) before close | number    | — | 0 |
 | custom-class | Drawerの追加クラス名 | string | — | — |
 | destroy-on-close | Drawerが閉じた後にChildrenが破壊されるべきかどうかを示す | boolean | - | false |
 | modal | シャドウイングレイヤーを表示するか | boolean | — | true |
@@ -437,6 +441,8 @@ Drawerは `destroyOnClose` というAPIを提供しています。これはフ
 | title | Drawerのタイトルは、スロットの名前を指定して設定することもできます。 | string | — | — |
 | withHeader | デフォルトは true で、withHeader が false に設定されている場合は `title attribute` と `title slot` の両方が動作しません。 | boolean | - | true |
 | modal-class | シャドウレイヤーの追加クラス名 | string | — | — |
+| z-index | set z-index | number | - | - |
+
 ### Drawerスロット
 
 | Name | Description |
diff --git a/website/docs/zh-CN/drawer.md b/website/docs/zh-CN/drawer.md
index f011523809..2e6e0b7310 100644
--- a/website/docs/zh-CN/drawer.md
+++ b/website/docs/zh-CN/drawer.md
@@ -414,14 +414,18 @@ Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组
 
 :::
 ### Drawer Attributes
-Drawer has almost identical attributes as Dialog.
+Drawer 和 Dialog 的属性几乎相同。
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | model-value / v-model | 是否显示 Drawer | boolean | — | false |
 | append-to-body     | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true   | boolean   | — | false |
+| lock-scroll | 是否在 Drawer 出现时将 body 滚动锁定 | boolean | — | true |
 | before-close | 关闭前的回调，会暂停 Drawer 的关闭 | function(done)，done 用于关闭 Drawer | — | — |
+| close-on-click-modal | 是否可以通过点击 modal 关闭 Drawer | boolean    | — | true |
 | close-on-press-escape | 是否可以通过按下 ESC 关闭 Drawer | boolean    | — | true |
+| open-delay      | Drawer 打开的延时时间，单位毫秒 | number    | — | 0 |
+| close-delay      | Drawer 关闭的延时时间，单位毫秒 | number    | — | 0 |
 | custom-class      | Drawer 的自定义类名 | string    | — | — |
 | destroy-on-close | 控制是否在关闭 Drawer 之后将子元素全部销毁 | boolean | - | false |
 | modal     | 是否需要遮罩层   | boolean   | — | true |
@@ -431,6 +435,8 @@ Drawer has almost identical attributes as Dialog.
 | title     | Drawer 的标题，也可通过具名 slot （见下表）传入 | string    | — | — |
 | withHeader | 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 | boolean | - | true |
 | modal-class | 遮罩层的自定义类名 | string | - | - |
+| z-index | 设置 z-index | number | - | - |
+
 ### Drawer Slot
 
 | name | 说明 |