element-ui?dialog彈窗增加全屏功能(推薦)
完成效果圖:
一、定義全局變量 dialogFull 用來(lái)控制彈窗
dialogFull:false,
二、dialog標(biāo)簽添加全局屬性綁定
:fullscreen="dialogFull"
三、設(shè)置title區(qū)域的自定義
<template slot="title"> <div class="avue-crud__dialog__header"> <span class="el-dialog__title"> <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span> 通道配置 </span> <div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true"> <i class="el-icon-full-screen"></i> </div> </div> </template>
四、css樣式部分:
//這里注意:我當(dāng)前將css樣式加載全局上,如果單頁(yè)添加樣式需要每個(gè)樣式前添加 ‘/deep/' 修飾符 /* dialog*/ .el-dialog__header { padding: 15px 20px 15px; } .el-dialog__headerbtn{ top: 15px; } /*dialog header*/ .el-dialog__header{ background: #e3eaed; } .avue-crud__dialog__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .el-dialog__title { color: rgba(0,0,0,.85); font-weight: 500; word-wrap: break-word; } .avue-crud__dialog__menu { padding-right: 20px; float: left; } .avue-crud__dialog__menu i { color: #909399; font-size: 15px; } .el-icon-full-screen{ cursor: pointer; } .el-icon-full-screen:before { content: "\e719"; }
撒花~~~~~
到此這篇關(guān)于element-ui dialog彈窗增加全屏功能的文章就介紹到這了,更多相關(guān)element-ui dialog彈窗全屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)檢查頁(yè)面上的廣告是否被AdBlock屏蔽了的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)檢查頁(yè)面上的廣告是否被AdBlock屏蔽了的方法,其實(shí)就是利用JS檢測(cè)div的名稱(chēng)和樣式名稱(chēng)實(shí)現(xiàn),需要的朋友可以參考下2014-11-11快速解決bootstrap下拉菜單無(wú)法隱藏的問(wèn)題
今天小編就為大家分享一篇快速解決bootstrap下拉菜單無(wú)法隱藏的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08bootstrap模態(tài)框關(guān)閉后清除模態(tài)框的數(shù)據(jù)方法
今天小編就為大家分享一篇bootstrap模態(tài)框關(guān)閉后清除模態(tài)框的數(shù)據(jù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08跨瀏覽器的 mouseenter mouseleave 以及 compareDocumentPosition的使用說(shuō)明
昨天去 大牛 司徒正美 的blog 看博文 突然看到 關(guān)于 onmouseenter 和onmouseleave 兩個(gè)ie專(zhuān)有事件..2010-05-05詳解webpack的文件監(jiān)聽(tīng)實(shí)現(xiàn)(熱更新)
這篇文章主要介紹了詳解webpack的文件監(jiān)聽(tīng)實(shí)現(xiàn)(熱更新),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09JavaScript實(shí)現(xiàn)系統(tǒng)防掛機(jī)(無(wú)操作彈窗)的示例詳解
在一些學(xué)習(xí)系統(tǒng),或者考試系統(tǒng)中。一旦出現(xiàn)長(zhǎng)時(shí)間未操作,就會(huì)判定這個(gè)人不在場(chǎng)。所以就會(huì)進(jìn)行退出系統(tǒng),處于對(duì)安全和系統(tǒng)負(fù)擔(dān)還有業(yè)務(wù)的需求。本文就來(lái)用JavaScript做一個(gè)系統(tǒng)防掛機(jī)功能,需要的可以參考一下2023-01-01javascript實(shí)現(xiàn)捕捉鍵盤(pán)上按下的鍵
JavaScript取得按下鍵盤(pán)的鍵是哪個(gè),通過(guò)創(chuàng)建一個(gè)event.keyCode對(duì)象,可有效獲取鍵盤(pán)上的鍵,運(yùn)行代碼后,點(diǎn)擊鍵盤(pán)上的任意鍵,網(wǎng)頁(yè)上顯示你按下的是哪個(gè)鍵。2015-05-05把input初始值不寫(xiě)value的具體實(shí)現(xiàn)方法
比如制作一個(gè)最常見(jiàn)的,input初始值,一般以前,我都只是寫(xiě)在input的value里,要把初始值單獨(dú)寫(xiě)出來(lái),就用<span>標(biāo)簽寫(xiě),定位在input上,讓它單擊和input獲焦上都消失2013-07-07js學(xué)習(xí)總結(jié)之DOM2兼容處理this問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了js學(xué)習(xí)總結(jié)之DOM2兼容處理this問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07