現在のページの状態を保持したまま、ユーザーに情報を提供します。

### 基本的な使い方

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 終了アニメーションの終了時にトリガーされます。                 | —          |