1. Dialog對(duì)話框

1.1. Dialog對(duì)話框在保留當(dāng)前頁(yè)面狀態(tài)的情況下, 告知用戶并承載相關(guān)操作。

1.2. Attributes

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
visible	是否顯示Dialog, 支持.sync修飾符	boolean	無(wú)	false
title	Dialog的標(biāo)題, 也可通過(guò)具名slot(見(jiàn)下表)傳入	string	無(wú)	無(wú)
width	Dialog的寬度	string	無(wú)	50%
fullscreen	是否為全屏Dialog	boolean	無(wú)	false
top	Dialog CSS中的margin-top值	string	無(wú)	15vh
modal	是否需要遮罩層	boolean	無(wú)	true
modal-append-to-body	遮罩層是否插入至body元素上, 若為false, 則遮罩層會(huì)插入至Dialog的父元素上	boolean	無(wú)	true
append-to-body	Dialog自身是否插入至body元素上。嵌套的Dialog必須指定該屬性并賦值為true	boolean	無(wú)	false
lock-scroll	是否在Dialog出現(xiàn)時(shí)將body滾動(dòng)鎖定	boolean	無(wú)	true
custom-class	Dialog的自定義類名	string	無(wú)	無(wú)
close-on-click-modal	是否可以通過(guò)點(diǎn)擊modal關(guān)閉Dialog	boolean	無(wú)	true
close-on-press-escape	是否可以通過(guò)按下ESC關(guān)閉Dialog	boolean	無(wú)	true
show-close	是否顯示關(guān)閉按鈕	boolean	無(wú)	true
before-close	關(guān)閉前的回調(diào), 會(huì)暫停Dialog的關(guān)閉	function(done), done用于關(guān)閉Dialog	無(wú)	無(wú)
center	是否對(duì)頭部和底部采用居中布局	boolean	無(wú)	false
destroy-on-close	關(guān)閉時(shí)銷毀Dialog中的元素	boolean	無(wú)	false

1.3. Slot

Name	說(shuō)明
—	Dialog的內(nèi)容
title	Dialog標(biāo)題區(qū)的內(nèi)容
footer	Dialog按鈕操作區(qū)的內(nèi)容

1.4. Events

事件名稱	說(shuō)明	回調(diào)參數(shù)
open	Dialog打開(kāi)的回調(diào)	無(wú)
opened	Dialog打開(kāi)動(dòng)畫(huà)結(jié)束時(shí)的回調(diào)	無(wú)
close	Dialog關(guān)閉的回調(diào)	無(wú)
closed	Dialog關(guān)閉動(dòng)畫(huà)結(jié)束時(shí)的回調(diào)	無(wú)

1.5. Dialog的內(nèi)容是懶渲染的, 即在第一次被打開(kāi)之前, 傳入的默認(rèn)slot不會(huì)被渲染到DOM上。因此, 如果需要執(zhí)行DOM操作, 或通過(guò)ref獲取相應(yīng)組件, 請(qǐng)?jiān)趏pen事件回調(diào)中進(jìn)行。

1.6. 如果visible屬性綁定的變量位于Vuex的store內(nèi), 那么.sync不會(huì)正常工作。此時(shí)需要去除.sync修飾符, 同時(shí)監(jiān)聽(tīng)Dialog的open和close事件, 在事件回調(diào)中執(zhí)行Vuex中對(duì)應(yīng)的mutation更新visible屬性綁定的變量的值。

2. Dialog對(duì)話框例子

2.1. 使用腳手架新建一個(gè)名為element-ui-dialog的前端項(xiàng)目, 同時(shí)安裝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下創(chuàng)建Dialog.vue

<template><div><h1>基本用法</h1><h4>需要設(shè)置visible屬性, 它接收Boolean, 當(dāng)為true時(shí)顯示Dialog。Dialog分為兩個(gè)部分: body和footer, footer需要具名為footer的slot。title屬性用于定義標(biāo)題, 它是可選的, 默認(rèn)值為空。最后, 本例還展示了before-close的用法。</h4><el-button type="text" @click="dialogVisible = true">點(diǎn)擊打開(kāi) 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('確認(rèn)關(guān)閉？').then(_ => {done()}).catch(_ => {})}} } </script>

2.4. 在components下創(chuàng)建MySelfDialog.vue

<template><div><h1>自定義內(nèi)容</h1><h4>Dialog組件的內(nèi)容可以是任意的, 甚至可以是表格或表單, 下面是應(yīng)用了Element Table和Form組件的兩個(gè)樣例。</h4><!-- Table --><el-button type="success" @click="dialogTableVisible = true">打開(kāi)嵌套表格的 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">打開(kāi)嵌套表單的 Dialog</el-button><el-dialog title="收貨地址" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item label="活動(dòng)名稱" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活動(dòng)區(qū)域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="請(qǐng)選擇活動(dòng)區(qū)域"><el-option label="區(qū)域一" value="shanghai"></el-option><el-option label="區(qū)域二" 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: '上海市普陀區(qū)金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區(qū)金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區(qū)金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區(qū)金沙江路 1518 弄'}],dialogTableVisible: false,dialogFormVisible: false,form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},formLabelWidth: '120px'}} } </script>

2.5. 在components下創(chuàng)建InnerDialog.vue

<template><div><h1>嵌套的Dialog</h1><h4>正常情況下, 我們不建議使用嵌套的Dialog, 如果需要在頁(yè)面上同時(shí)顯示多個(gè)Dialog, 可以將它們平級(jí)放置。對(duì)于確實(shí)需要嵌套Dialog的場(chǎng)景, 我們提供了append-to-body屬性。將內(nèi)層Dialog的該屬性設(shè)置為true, 它就會(huì)插入至body元素上, 從而保證內(nèi)外層Dialog和遮罩層級(jí)關(guān)系的正確。</h4><el-button type="text" @click="outerVisible = true">點(diǎn)擊打開(kāi)外層 Dialog</el-button><el-dialog title="外層 Dialog" :visible.sync="outerVisible"><el-dialog width="30%" title="內(nèi)層 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">打開(kāi)內(nèi)層 Dialog</el-button></div></el-dialog></div> </template><script> export default {data () {return {outerVisible: false,innerVisible: false}} } </script>

2.6. 在components下創(chuàng)建CenterDialog.vue

<template><div><h1>居中布局</h1><h4>將center設(shè)置為true即可使標(biāo)題和底部居中。center僅影響標(biāo)題和底部區(qū)域。Dialog的內(nèi)容是任意的, 在一些情況下, 內(nèi)容并不適合居中布局。如果需要內(nèi)容也水平居中, 請(qǐng)自行為其添加CSS。</h4><el-button type="text" @click="centerDialogVisible = true">點(diǎn)擊打開(kāi) Dialog</el-button><el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center><span>需要注意的是內(nèi)容是默認(rèn)不居中的</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. 運(yùn)行項(xiàng)目, 訪問(wèn)http://localhost:8080/#/Dialog

2.8. 運(yùn)行項(xiàng)目, 訪問(wèn)http://localhost:8080/#/MySelfDialog

2.9. 運(yùn)行項(xiàng)目, 訪問(wèn)http://localhost:8080/#/InnerDialog

2.10. 運(yùn)行項(xiàng)目, 訪問(wèn)http://localhost:8080/#/CenterDialog

總結(jié)

以上是生活随笔為你收集整理的039_Dialog对话框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。