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