Element-Ui元件（三十八）Dialog 對話方塊

本文來源於Element官方文件：

http://element-cn.eleme.io/#/zh-CN/component/dialog

基礎用法

普通對話方塊

<el-button type="text" @click="dialogVisible = true">點選開啟 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>這是一段資訊</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('確認關閉？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

自定義對話方塊

<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">開啟巢狀表格的 Dialog</el-button>

<el-dialog title="收貨地址" :visible.sync="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>
    <el-table-column property="address" label="地址"></el-table-column>
  </el-table>
</el-dialog>

<!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">開啟巢狀表單的 Dialog</el-button>

<el-dialog title="收貨地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="活動名稱" :label-width="formLabelWidth">
      <el-input v-model="form.name" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="活動區域" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="請選擇活動區域">
        <el-option label="區域一" value="shanghai"></el-option>
        <el-option label="區域二" value="beijing"></el-option>
      </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>
</el-dialog>

巢狀對話方塊

<el-button type="text" @click="outerVisible = true">點選開啟外層 Dialog</el-button>

  <el-dialog title="外層 Dialog" :visible.sync="outerVisible">
    <el-dialog
      width="30%"
      title="內層 Dialog"
      :visible.sync="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>
  </el-dialog>

Steps Attributes：

引數	型別	說明	可選值	預設值
visible	是否顯示 Dialog，支援 .sync 修飾符	boolean	—	false
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	—	—
close-on-click-modal	是否可以通過點選 modal 關閉 Dialog	boolean	—	true
close-on-press-escape	是否可以通過按下 ESC 關閉 Dialog	boolean	—	true
show-close	是否顯示關閉按鈕	boolean	—	true
before-close	關閉前的回撥，會暫停 Dialog 的關閉	function(done)，done 用於關閉 Dialog	—	—
center	是否對頭部和底部採用居中佈局	boolean	—	false

Step Slot

name	說明
—	Dialog 的內容
title	Dialog 標題區的內容
footer	Dialog 按鈕操作區的內容

Events

事件名稱	說明	回撥引數
close	Dialog 關閉的回撥	—
open	Dialog 開啟的回撥	—