element-ui dialog弹窗增加全屏功能

news/2024/7/19 14:08:21 标签: js, elementui, dialog, 放大缩小, 放大

完成效果图:在这里插入图片描述

一、定义全局变量 dialogFull 用来控制弹窗

 dialogFull:false,

在这里插入图片描述

二、dialog标签添加全局属性绑定

:fullscreen="dialogFull"

在这里插入图片描述

三、设置title区域的自定义

<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";
}

撒花~~~~~


http://www.niftyadmin.cn/n/1065189.html

相关文章

intent大全【转】

1.从google搜索内容Intent intent new Intent();intent.setAction(Intent.ACTION_WEB_SEARCH);intent.putExtra(SearchManager.QUERY,"searchString")startActivity(intent); 2.浏览网页Uri uri Uri.parse("http://www.google.com");Intent it new Int…

Atitit USRqc62204 证书管理器标准化规范

Atitit USRqc62204 证书管理器标准化规范 /atiplat_cms/src/com/attilax/cert/CertSrv4mv.java /** * */ package com.attilax.cert; import java.io.File; import java.util.Date; import com.attilax.device.HardWareUtils; import com.attilax.io.FileExistEx; import com.…

跳转到新页面并清除当前页面的history记录

History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录&#xff0c;通过history方法触发前进后退 通常使用的方式&#xff1a; window.location.hrefindex.html // 或者 window.location.replace(index.html)使用场景&#xff1a;比如别人访问你得网站 不想回…

ExtJS创建Grid

Ext.onReady(function() { // 构造表格的数据 var data [ {id:1,X0:小明,X1:沈阳,X2:111}, {id:2,X0:小强,X1:大连,X2:222}, {id:3,X0:小力,X1:北京,X2:333}, {id:4,X0:小刚,X1:上海,X2:444}]; // 数据字段指定 var store new Ext.data…

成都Uber优步司机奖励政策(3月16日)

滴快车单单2.5倍&#xff0c;注册地址&#xff1a;http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单&#xff1a;http://www.cnblogs.com/mfryf/p/4612609.html 优步奖励低/不挣钱/怎么办?看这里&#xff1a;http://www.cnblogs.com/mfry…

wc命令

wc命令 wc命令的功能为统计指定文件中的字节数、字数、行数, 并将统计结果显示输出。 语法&#xff1a;wc [选项] 文件… 说明&#xff1a;该命令统计给定文件中的字节数、字数、行数。如果没有给出文件名&#xff0c;则从标准输入读取。wc同时也给出所有指定文件的总统计数。字…

vue打包部署,解决更新版本清理缓存问题

参考来自&#xff1a;https://blog.csdn.net/lzb348110175/article/details/114142229 一、根目录index.html 在head标签中&#xff0c;加入下面的代码 <meta http-equiv"pragram" content"no-cache"> <meta http-equiv"cache-control&quo…

Silverlight公网部署OOB模式时自动更新的配置

OOB公网部署时必须加上数字签名才能自动更新&#xff0c;目前查到的方法如下&#xff1a; 1&#xff0c;打开Visual Studio Tools里面的命令提示&#xff0c;然后运行以下命令。 makecert.exe -r -n "CNLINYH" -b 01/01/2009 -e 12/31/2019 -sv c:\Cert\CbipSetupKey…