mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 09:50:58 +08:00
d3c1e8eac7
* feat(docs): Dialog code for composition * feat(docs): dialog code for ElMessageBox * feat(docs): fix error code for dialog Co-authored-by: 无星 <32910694@qq.com>
413 lines
14 KiB
Markdown
413 lines
14 KiB
Markdown
現在のページの状態を保持したまま、ユーザーに情報を提供します。
|
||
|
||
### 基本的な使い方
|
||
|
||
dialog はdialogボックスをポップアップ表示します。
|
||
|
||
:::demo `model-value / v-model` 属性に `Boolean` を設定し、それが `true` のときにdialogを表示します。dialogは `body` と `footer` の2つの部分からなり、後者は `footer` という名前の `スロット` を必要とします。オプションの `title` 属性 (デフォルトでは空) はタイトルを定義するためのものです。最後に、この例では `before-close` がどのように使われるかを示します。
|
||
|
||
```html
|
||
<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
|
||
|
||
<el-dialog
|
||
title="Tips"
|
||
v-model="dialogVisible"
|
||
width="30%"
|
||
:before-close="handleClose">
|
||
<span>This is a message</span>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
dialogVisible: false
|
||
};
|
||
},
|
||
methods: {
|
||
handleClose(done) {
|
||
this.$confirm('Are you sure to close this dialog?')
|
||
.then(_ => {
|
||
done();
|
||
})
|
||
.catch(_ => {});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<!--
|
||
<setup>
|
||
|
||
import { defineComponent, ref } from 'vue';
|
||
import { ElMessageBox } from 'element-plus';
|
||
|
||
export default defineComponent({
|
||
setup() {
|
||
const dialogVisible = ref(false);
|
||
|
||
const handleClose = (done) => {
|
||
ElMessageBox
|
||
.confirm('Are you sure to close this dialog?')
|
||
.then((_) => {
|
||
done();
|
||
})
|
||
.catch((_) => {});
|
||
};
|
||
return {
|
||
dialogVisible,
|
||
handleClose,
|
||
};
|
||
},
|
||
});
|
||
|
||
</setup>
|
||
-->
|
||
```
|
||
:::
|
||
|
||
:::tip
|
||
`before-close` はユーザが閉じるアイコンか背景をクリックしたときにのみ動作します。footer` という名前のスロットにdialogを閉じるボタンがある場合、ボタンのクリックイベントハンドラに `before-close` と同じように `before-close` を追加することができます。
|
||
:::
|
||
|
||
### カスタマイズ
|
||
|
||
dialog の内容は何でも構いません、テーブルやフォームであっても構いません。この例では、要素テーブルとフォームを dialog で使う方法を示しています。
|
||
|
||
:::demo
|
||
|
||
```html
|
||
<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>
|
||
|
||
<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>
|
||
<el-table-column property="address" label="Address"></el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
|
||
<!-- Form -->
|
||
<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>
|
||
|
||
<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>
|
||
</el-form-item>
|
||
<el-form-item label="Zones" :label-width="formLabelWidth">
|
||
<el-select v-model="form.region" placeholder="Please select a zone">
|
||
<el-option label="Zone No.1" value="shanghai"></el-option>
|
||
<el-option label="Zone No.2" value="beijing"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<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>
|
||
export default {
|
||
data() {
|
||
return {
|
||
gridData: [{
|
||
date: '2016-05-02',
|
||
name: 'John Smith',
|
||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||
}, {
|
||
date: '2016-05-04',
|
||
name: 'John Smith',
|
||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||
}, {
|
||
date: '2016-05-01',
|
||
name: 'John Smith',
|
||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||
}, {
|
||
date: '2016-05-03',
|
||
name: 'John Smith',
|
||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||
}],
|
||
dialogTableVisible: false,
|
||
dialogFormVisible: false,
|
||
form: {
|
||
name: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: ''
|
||
},
|
||
formLabelWidth: '120px'
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
<!--
|
||
<setup>
|
||
|
||
import { defineComponent, reactive, toRefs } from 'vue';
|
||
|
||
export default defineComponent({
|
||
setup() {
|
||
const state = reactive({
|
||
gridData: [
|
||
{
|
||
date: '2016-05-02',
|
||
name: 'John Smith',
|
||
address: 'No.1518, Jinshajiang Road, Putuo District',
|
||
},
|
||
{
|
||
date: '2016-05-04',
|
||
name: 'John Smith',
|
||
address: 'No.1518, Jinshajiang Road, Putuo District',
|
||
},
|
||
{
|
||
date: '2016-05-01',
|
||
name: 'John Smith',
|
||
address: 'No.1518, Jinshajiang Road, Putuo District',
|
||
},
|
||
{
|
||
date: '2016-05-03',
|
||
name: 'John Smith',
|
||
address: 'No.1518, Jinshajiang Road, Putuo District',
|
||
},
|
||
],
|
||
dialogTableVisible: false,
|
||
dialogFormVisible: false,
|
||
form: {
|
||
name: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: '',
|
||
},
|
||
formLabelWidth: '120px',
|
||
});
|
||
|
||
return {
|
||
...toRefs(state),
|
||
};
|
||
},
|
||
});
|
||
|
||
</setup>
|
||
-->
|
||
```
|
||
:::
|
||
|
||
### ネストされたdialog
|
||
あるdialogが他のdialogにネストになっている場合は `append-to-body` が必要です。
|
||
:::demo 通常、ネストになったdialogを使うことはお勧めしません。複数のdialogをページ上でレンダリングしたい場合は、単にそれらをフラットにして隣接することができます。dialogを別のdialogの中に入れ子にしなければならない場合は、入れ子にしたdialogの `append-to-body` を true に設定すると、親ノードではなくボディに追加され、両方のdialogが正しくレンダリングされます。
|
||
```html
|
||
<template>
|
||
<el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
|
||
|
||
<el-dialog title="Outer Dialog" v-model="outerVisible">
|
||
<el-dialog
|
||
width="30%"
|
||
title="Inner Dialog"
|
||
v-model="innerVisible"
|
||
append-to-body>
|
||
</el-dialog>
|
||
<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>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
outerVisible: false,
|
||
innerVisible: false
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
<!--
|
||
<setup>
|
||
|
||
import { defineComponent, ref } from 'vue';
|
||
|
||
export default defineComponent({
|
||
setup() {
|
||
return {
|
||
outerVisible: ref(false),
|
||
innerVisible: ref(false),
|
||
};
|
||
},
|
||
});
|
||
|
||
</setup>
|
||
-->
|
||
```
|
||
:::
|
||
|
||
### 中央揃えコンテンツ
|
||
dialogの内容を中央揃えにすることができます。
|
||
|
||
:::demo `center` を `true` に設定すると、dialogのヘッダとフッタを水平方向に中央揃えにします。`center`はDialogのヘッダとフッタにのみ影響します。dialogのボディは何でもいいので、中央揃えにすると見栄えが悪くなることがあります。ボディも中央揃えにしたい場合は、CSSを書く必要があります。
|
||
|
||
```html
|
||
<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
|
||
|
||
<el-dialog
|
||
title="Warning"
|
||
v-model="centerDialogVisible"
|
||
width="30%"
|
||
center>
|
||
<span>It should be noted that the content will not be aligned in center by default</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>
|
||
export default {
|
||
data() {
|
||
return {
|
||
centerDialogVisible: false
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
<!--
|
||
<setup>
|
||
|
||
import { defineComponent, ref } from 'vue';
|
||
|
||
export default defineComponent({
|
||
setup() {
|
||
return {
|
||
centerDialogVisible: ref(false),
|
||
};
|
||
},
|
||
});
|
||
|
||
</setup>
|
||
-->
|
||
```
|
||
:::
|
||
|
||
:::tip
|
||
dialogの内容は遅延的にレンダリングされます。つまり、デフォルトのスロットは最初に開かれるまで DOM にレンダリングされません。したがって、DOM の操作を行ったり `ref` を使ってコンポーネントにアクセスする必要がある場合は、`open` イベントコールバックで行います。
|
||
:::
|
||
|
||
|
||
### dialog内の要素を破棄する (translation needed)
|
||
When this is feature is enabled, the content under default slot will be destroyed with a `v-if` directive. Enable this when you have perf concerns.
|
||
|
||
:::demo Note that by enabling this feature, the content will not be rendered before `transition.beforeEnter` dispatched, there will only be `overlay` `header(if any)` `footer(if any)`.
|
||
|
||
```html
|
||
<el-button type="text" @click="centerDialogVisible = true">Click to open Dialog</el-button>
|
||
|
||
<el-dialog
|
||
title="Notice"
|
||
v-model="centerDialogVisible"
|
||
width="30%"
|
||
destroy-on-close
|
||
center>
|
||
<span>Notice: before dialog gets opened for the first time this node and the one bellow will not be rendered</span>
|
||
<div>
|
||
<strong>Extra content (Not rendered)</strong>
|
||
</div>
|
||
<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>
|
||
export default {
|
||
data() {
|
||
return {
|
||
centerDialogVisible: false
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
<!--
|
||
<setup>
|
||
|
||
import { defineComponent, ref } from 'vue';
|
||
|
||
export default defineComponent({
|
||
setup() {
|
||
return {
|
||
centerDialogVisible: ref(false),
|
||
};
|
||
},
|
||
});
|
||
|
||
</setup>
|
||
-->
|
||
|
||
```
|
||
|
||
:::tip
|
||
When using `modal` = false, please make sure that `append-to-body` was set to **true**, because `Dialog` was positioned by `position: relative`, when `modal` gets removed, `Dialog` will position itself based on the current position in the DOM, instead of `Document.Body`, thus the style will be messed up.
|
||
:::
|
||
|
||
### 属性
|
||
|
||
| Attribute | Description | Type | Accepted Values | Default |
|
||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||
| model-value / v-model | dialogの可視性 | boolean | — | — |
|
||
| title | dialogのタイトルを指定します。名前付きスロットで渡すこともできます (次のテーブルを参照してください)。 | string | — | — |
|
||
| width | dialogの幅 | string / number | — | 50% |
|
||
| fullscreen | dialogが全画面を占めるかどうか | boolean | — | false |
|
||
| top | dialogCSSの `margin-top` の値 | string | — | 15vh |
|
||
| modal | マスクが表示されているかどうか | 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 |
|
||
| before-close | コールバックを使用することで、dialogが閉じるのを防ぐことができます。 | function(done)，done is used to close the Dialog | — | — |
|
||
| center | ヘッダーとフッターを中央に配置するかどうか | boolean | — | false |
|
||
| destroy-on-close | dialogを閉じたときにdialog内の要素を破棄する | boolean | — | false |
|
||
|
||
### スロット
|
||
|
||
| Name | Description |
|
||
|------|--------|
|
||
| — | dialogの内容 |
|
||
| title | dialogタイトルの内容 |
|
||
| footer | dialogフッターの内容 |
|
||
|
||
### イベント
|
||
| Event Name | Description | Parameters |
|
||
|---------- |-------- |---------- |
|
||
| open | dialogが開いたときにトリガーされます。 | — |
|
||
| opened | dialogのオープニングアニメーションが終了したときにトリガーされます。 | — |
|
||
| close | dialogが閉じたときにトリガーされます。 | — |
|
||
| closed | dialog終了アニメーションの終了時にトリガーされます。 | — |
|