test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 03:08:21 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs(dialog): update dialog docs (#650)

Browse Source
This commit is contained in:
BeADre 2020-11-23 09:47:23 +08:00 committed by GitHub
parent 55d52a2164
commit c550aa01cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 118 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
website/docs/en-US/dialog.md
View File

@ -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 |

46
website/docs/es/dialog.md
View File

@ -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 |

45
website/docs/fr-FR/dialog.md
View File

@ -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 |

46
website/docs/jp/dialog.md
View File

@ -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 |

47
website/docs/zh-CN/dialog.md
View File

@ -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 |