element-ui dialog弹窗增加全屏功能(推荐)

目录
  • 一、定义全局变量 dialogFull 用来控制弹窗
  • 二、dialog标签添加全局属性绑定
  • 三、设置title区域的自定义
  • 四、css样式部分：

完成效果图：

一、定义全局变量 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";
}

撒花~~~~~

到此这篇关于element-ui dialog弹窗增加全屏功能的文章就介绍到这了,更多相关element-ui dialog弹窗全屏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解如何在vue+element-ui的项目中封装dialog组件

    1.问题起源 由于 Vue 基于组件化的设计,得益于这个思想,我们在 Vue 的项目中可以通过封装组件提高代码的复用性.根据我目前的使用心得,知道 Vue 拆分组件至少有两个优点: 1.代码复用. 2.代码拆分 在基于 element-ui 开发的项目中,可能我们要写出一个类似的调度弹窗功能,很容易编写出以下代码: <template> <div> <el-dialog :visible.sync="cnMapVisible">我是中国地图的弹窗&l

  • element-ui中dialog弹窗关闭按钮失效的解决

    如下所示: <el-dialog title="修改库存" :visible.sync="kcDialog" @close="kcDialog = false"> ... </el-dialog> 加一个@close可以是一个方法或者直接操作kcDialog为false 补充知识:webpack外部扩展,依赖前置 引入了外部js index.html <script src="https://code.jq

  • element-ui 对话框dialog使用echarts报错'dom没有获取到'的问题

    给el-dialog添加@open="open()" 在刚进入页面的时候对话框是关闭的,echarts不进行获取dom,当点击对话框出来的时候,有个opened事件,在这个事件里边进行echarts的初始化,执行数据: <el-dialog lock-scroll width="80%" style="height:100%;" @opened="opens"> <div style="displa

  • 基于element-ui对话框el-dialog初始化的校验问题解决

    不刷新页面重新打开el-dialog时,如果我们绑定了rules或者某个值需要required,它总会自动校验. 查看了多个博文,发现常用的有两种解决方法(下列方法都可以在其他博文查看,不再细写,如有需要请自行查询): 1.给dialog套上v-if : 2.在关闭dialog时,监听关闭回调,清除校验. 我在自己的项目里使用了上述两种方法,都不太好用,自己琢磨出了另一种方法: <el-dialog @open="openDialog()"> </el-dialog&

  • element-ui dialog弹窗增加全屏功能(推荐)

    目录 一.定义全局变量 dialogFull 用来控制弹窗 二.dialog标签添加全局属性绑定 三.设置title区域的自定义 四.css样式部分: 完成效果图: 一.定义全局变量 dialogFull 用来控制弹窗 dialogFull:false, 二.dialog标签添加全局属性绑定 :fullscreen="dialogFull" 三.设置title区域的自定义 <template slot="title"> <div class=&qu

  • vue-cli点击实现全屏功能

    本文实例为大家分享了vue-cli点击实现全屏功能的具体代码,供大家参考,具体内容如下 项目中有点击按钮实现全屏功能 方式一:js实现全屏 代码如下: <template> <div> <a-button type="primary" @click="screen">全屏</a-button> </div> </template> <script> export default {

  • Python的IDEL增加清屏功能实例

    为idle增加一个清屏的扩展ClearWindow就可以了(在http://bugs.python.org/issue6143中可以看到这个扩展的说明). 下面我说安装使用的方法.首先下载clearwindow.py(点击可直接下载,不能下载的可以右键保存,格式为py结尾),将这个文件放在Python X\Lib\idlelib目录下(X为你的python版本),然后在这个目录下找到config-extensions.def这个文件(idle扩展的配置文件),以记事本的方式打开它(为防止出错,你

  • MFC实现全屏功能代码实例

    windows应用程序中有很多的播放器都有快捷键控制窗口以全屏幕的方式显示.MFC实现给应用程序加上全屏幕的功能,并不需要很多的代码,比如给一个基于对话框的应用程序加上全屏功能只需要以下少量代码就可以实现了. 实现代码如下所示: void CFullScreenDlg::FullScreenView(void) { RECT rectDesktop; WINDOWPLACEMENT wpNew; if (!IsFullScreen()) { // We'll need these to rest

  • 富文本编辑器vue2-editor实现全屏功能

    vue2-editor非常不错,可惜并未带全屏功能,自己实现了一个,供大家参考. 实现思路:自定义模块. 1. 定义全屏模块Fullscreen /** * 编辑器的全屏实现 */ import noScroll from 'no-scroll' export default class Fullscreen { constructor (quill, options = {}) { this.quill = quill this.options = options this.fullscree

  • iOS实现视频播放全屏和取消全屏功能

    本文实例为大家分享了iOS实现视频播放和取消全屏功能具体代码,供大家参考,具体内容如下 iOS 视频播放全屏和取消全屏功能实现,所需全屏的视频所在的vc需要导航控制器控制 自定义 全屏vc VedioPlayerViewController 并定义属性 /// 自定义的那个视频类 ///@property (nonatomic,strong) VedioPlayer *vedioPlayer; 在VedioPlayer中定义属性 ///视频展示的view 的父视图 @property (nona

  • vue使用screenfull插件实现全屏功能

    本文实例为大家分享了vue使用screenfull插件实现全屏功能的具体代码,供大家参考,具体内容如下 1.安装screenfull.js插件(在npm官网上有) npm install screenfull --save 2.在vue项目中 src/components/ScreenFull/index.vue(写成公共组件) <template> <el-tooltip effect="dark" content="全屏" placement=

  • Vue + Element UI 实现权限管理系统之菜单功能实现代码

    Vue + Element UI 实现权限管理系统之菜单功能实现代码

    目录 菜单功能实现 菜单接口封装 菜单管理界面 测试效果 源码下载 菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作. 提供一个菜单查询接口,查询整颗菜单树形结构. http/modules/menu.js 添加findMenuTree 接口. import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', m

  • React自定义视频全屏按钮实现全屏功能

    目录 前言 一.绘制全屏按钮 二.编写点击事件 三.编写相关函数 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 React自定义视频全屏按钮,实现全屏功能. 一.绘制全屏按钮 绘制全屏按钮,并绑定点击事件: render() { return ( <div className={'fullfrequency'}> <img src={require("./全屏.png") } id="picts" onClick={thi

  • C#窗体全屏功能实例代码

    最近有朋友让我给他弄个应用程序全屏的功能,例如银行的取号程序界面.所以我从网上查询了一些实现的方法. C#应用程序中如何实现全屏幕显示功能? 效果就像windows自带的屏幕保护程序和众多的游戏那样,无论是否设置了"将任务栏保持在其他窗口的前端"都不显示任务栏 实现方式一 在网上找来一些简单的实现方式: this.FormBorderStyle = FormBorderStyle.None; //设置窗体为无边框样式 this.WindowState = FormWindowState

随机推荐