element-plus/website/docs/jp/dialog.md

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

基本的な使い方

dialog は dialog ボックスをポップアップ表示します。

:::demo model-value / v-model 属性に Boolean を設定し、それが true のときに dialog を表示します。dialog は body と footer の 2 つの部分からなり、後者は footer という名前の スロット を必要とします。オプションの title 属性 (デフォルトでは空) はタイトルを定義するためのものです。最後に、この例では before-close がどのように使われるかを示します。

<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

<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 が正しくレンダリングされます。

<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 を書く必要があります。

<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).

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