1. Dialog對話框

1.1. Dialog對話框在保留當前頁面狀態的情況下, 告知用戶并承載相關操作。

1.2. 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
destroy-on-close	關閉時銷毀Dialog中的元素	boolean	無	false

1.3. Slot

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

1.4. Events

事件名稱	說明	回調參數
open	Dialog打開的回調	無
opened	Dialog打開動畫結束時的回調	無
close	Dialog關閉的回調	無
closed	Dialog關閉動畫結束時的回調	無

1.5. Dialog的內容是懶渲染的, 即在第一次被打開之前, 傳入的默認slot不會被渲染到DOM上。因此, 如果需要執行DOM操作, 或通過ref獲取相應組件, 請在open事件回調中進行。

1.6. 如果visible屬性綁定的變量位于Vuex的store內, 那么.sync不會正常工作。此時需要去除.sync修飾符, 同時監聽Dialog的open和close事件, 在事件回調中執行Vuex中對應的mutation更新visible屬性綁定的變量的值。

2. Dialog對話框例子

2.1. 使用腳手架新建一個名為element-ui-dialog的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Dialog from '../components/Dialog.vue' import MySelfDialog from '../components/MySelfDialog.vue' import InnerDialog from '../components/InnerDialog.vue' import CenterDialog from '../components/CenterDialog.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Dialog' },{ path: '/Dialog', component: Dialog },{ path: '/MySelfDialog', component: MySelfDialog },{ path: '/InnerDialog', component: InnerDialog },{ path: '/CenterDialog', component: CenterDialog } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建Dialog.vue

<template><div><h1>基本用法</h1><h4>需要設置visible屬性, 它接收Boolean, 當為true時顯示Dialog。Dialog分為兩個部分: body和footer, footer需要具名為footer的slot。title屬性用于定義標題, 它是可選的, 默認值為空。最后, 本例還展示了before-close的用法。</h4><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></div> </template><script> export default {data () {return {dialogVisible: false}},methods: {handleClose (done) {this.$confirm('確認關閉？').then(_ => {done()}).catch(_ => {})}} } </script>

2.4. 在components下創建MySelfDialog.vue

<template><div><h1>自定義內容</h1><h4>Dialog組件的內容可以是任意的, 甚至可以是表格或表單, 下面是應用了Element Table和Form組件的兩個樣例。</h4><!-- Table --><el-button type="success" @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><div style="margin-top: 20px;"></div><!-- Form --><el-button @click="dialogFormVisible = true" type="primary">打開嵌套表單的 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" autocomplete="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></div> </template><script> export default {data () {return {gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}],dialogTableVisible: false,dialogFormVisible: false,form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},formLabelWidth: '120px'}} } </script>

2.5. 在components下創建InnerDialog.vue

<template><div><h1>嵌套的Dialog</h1><h4>正常情況下, 我們不建議使用嵌套的Dialog, 如果需要在頁面上同時顯示多個Dialog, 可以將它們平級放置。對于確實需要嵌套Dialog的場景, 我們提供了append-to-body屬性。將內層Dialog的該屬性設置為true, 它就會插入至body元素上, 從而保證內外層Dialog和遮罩層級關系的正確。</h4><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></div> </template><script> export default {data () {return {outerVisible: false,innerVisible: false}} } </script>

2.6. 在components下創建CenterDialog.vue

<template><div><h1>居中布局</h1><h4>將center設置為true即可使標題和底部居中。center僅影響標題和底部區域。Dialog的內容是任意的, 在一些情況下, 內容并不適合居中布局。如果需要內容也水平居中, 請自行為其添加CSS。</h4><el-button type="text" @click="centerDialogVisible = true">點擊打開 Dialog</el-button><el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center><span>需要注意的是內容是默認不居中的</span><span slot="footer" class="dialog-footer"><el-button @click="centerDialogVisible = false">取 消</el-button><el-button type="primary" @click="centerDialogVisible = false">確 定</el-button></span></el-dialog></div> </template><script> export default {data () {return {centerDialogVisible: false}} } </script>

2.7. 運行項目, 訪問http://localhost:8080/#/Dialog

2.8. 運行項目, 訪問http://localhost:8080/#/MySelfDialog

2.9. 運行項目, 訪問http://localhost:8080/#/InnerDialog

2.10. 運行項目, 訪問http://localhost:8080/#/CenterDialog

總結

以上是生活随笔為你收集整理的039_Dialog对话框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。