欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評論