快捷導(dǎo)航

element-ui?dialog彈窗增加全屏功能(推薦)

更新時間：2022年11月18日 10:08:00 作者：Mr.T's?Blog

這篇文章主要介紹了element-ui?dialog彈窗增加全屏功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、定義全局變量 dialogFull 用來控制彈窗

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樣式加載全局上，如果單頁添加樣式需要每個樣式前添加 ‘/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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript比較兩個對象是否相等的方法
這篇文章主要介紹了JavaScript比較兩個對象是否相等的方法,通過對js對象進(jìn)行各方面的比較來判斷兩個對象是否相等,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
js仿騰訊QQ的web登陸界面
這篇文章主要為大家詳細(xì)介紹了JavaScript模仿騰訊QQ的web登陸界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
基于jQuery的圖片不完全按比例自動縮小
有時我們會有這樣的需求：讓圖片顯示在固定大小的區(qū)域。如果不考慮 IE6 完全可以使用 css 的 max-width 限制寬度自動按比例縮小顯示，但是這樣有個問題，就是如果按比例縮小后，圖片高度不夠，那么就很難看了
2014-07-07
javascript獲取四位數(shù)字或者字母的隨機數(shù)
這篇文章主要介紹了javascript獲取四位數(shù)字或者字母的隨機數(shù),需要的朋友可以參考下
2015-01-01
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之常見排序（Sort）算法詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之常見排序（Sort）算法,結(jié)合實例形式詳細(xì)分析了js常見排序算法中的冒泡排序、選擇排序、插入排序、希爾排序、歸并排序、快速排序等算法相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下
2019-08-08
JavaScript深拷貝與淺拷貝原理深入探究
深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對基本類型和引用類型的理解深度,這篇文章主要給大家介紹了關(guān)于js深拷貝和淺拷貝的相關(guān)資料,需要的朋友可以參考下
2022-10-10
JS中arguments的使用示例
本文主要介紹了JS中arguments的使用示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
JavaScript隨機排序(隨即出牌)
JavaScript隨機排序，自動抽取中文與英文字母，重新組合并隨機排序，生成隨機數(shù)很可以。
2010-09-09
javaScript產(chǎn)生隨機數(shù)的用法小結(jié)
這篇文章主要介紹了javaScript產(chǎn)生隨機數(shù)的用法小結(jié),包括JavaScript Math.random()內(nèi)置函數(shù) ，Js 隨機數(shù)產(chǎn)生6位數(shù)字的代碼，需要的朋友可以參考下
2018-04-04
5分鐘理解JavaScript中this用法分享
這篇文章介紹了5分鐘理解JavaScript中this用法，有需要的朋友可以參考一下
2013-11-11