element-ui?dialog彈窗增加全屏功能(推薦)
更新時間：2022年11月18日 10:08:00 作者：Mr.T's?Blog
這篇文章主要介紹了element-ui?dialog彈窗增加全屏功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
完成效果圖：
一、定義全局變量 dialogFull 用來控制彈窗
dialogFull:false,
二、dialog標簽添加全局屬性綁定
:fullscreen="dialogFull"
三、設置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樣式部分：
//這里注意：我當前將css樣式加載全局上，如果單頁添加樣式需要每個樣式前添加 ‘/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";
}
撒花~~~~~
到此這篇關于element-ui dialog彈窗增加全屏功能的文章就介紹到這了,更多相關element-ui dialog彈窗全屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JavaScript比較兩個對象是否相等的方法,通過對js對象進行各方面的比較來判斷兩個對象是否相等,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了JavaScript模仿騰訊QQ的web登陸界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
有時我們會有這樣的需求：讓圖片顯示在固定大小的區(qū)域。如果不考慮 IE6 完全可以使用 css 的 max-width 限制寬度自動按比例縮小顯示，但是這樣有個問題，就是如果按比例縮小后，圖片高度不夠，那么就很難看了2014-07-07
javascript獲取四位數(shù)字或者字母的隨機數(shù)
這篇文章主要介紹了javascript獲取四位數(shù)字或者字母的隨機數(shù),需要的朋友可以參考下2015-01-01
JS中的算法與數(shù)據(jù)結構之常見排序（Sort）算法詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結構之常見排序（Sort）算法,結合實例形式詳細分析了js常見排序算法中的冒泡排序、選擇排序、插入排序、希爾排序、歸并排序、快速排序等算法相關實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2019-08-08
深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對基本類型和引用類型的理解深度,這篇文章主要給大家介紹了關于js深拷貝和淺拷貝的相關資料,需要的朋友可以參考下2022-10-10
本文主要介紹了JS中arguments的使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
JavaScript隨機排序，自動抽取中文與英文字母，重新組合并隨機排序，生成隨機數(shù)很可以。2010-09-09
javaScript產(chǎn)生隨機數(shù)的用法小結
這篇文章主要介紹了javaScript產(chǎn)生隨機數(shù)的用法小結,包括JavaScript Math.random()內(nèi)置函數(shù) ，Js 隨機數(shù)產(chǎn)生6位數(shù)字的代碼，需要的朋友可以參考下2018-04-04
這篇文章介紹了5分鐘理解JavaScript中this用法，有需要的朋友可以參考一下2013-11-11