el-drawer抽屉组件弹窗遮挡问题解决

简介: el-drawer抽屉组件弹窗遮挡问题解决

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址:RuoYi-Nbcio后台管理系统

1、根据需要,需要在下面窗口里弹出抽屉组件,但出现遮挡问题,如下:

<el-dialog :title="designerData.name" :visible.sync="designerOpen" append-to-body fullscreen>
      <dd-designer
        :key="designerOpen"
        style="border:1px solid rgba(0, 0, 0, 0.1);"
        ref="ddDesigner"
        v-loading="designerData.loading"
        :designerData = designerData.flowData
        @save="onSaveDesigner"
      />
    </el-dialog>

2、根据相关资料,可以增加一个append-to-body="true" 来解决这个问题,如下:

<template>
  <!-- append-to-body="true" 是为了不被前面对话框遮挡 by nbacheng -->
  <el-drawer
    :append-to-body="true"
    size="550px"
    class="drawer"
    :visible.sync="visible"
    :show-close="false"
    style="text-align:left;"
    @close="cancel"
    v-if="properties"
  >

相关文章
|
前端开发
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
3333 0
|
JavaScript
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案,vue在<el-drawer>中嵌套<el-drawer>时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案,vue在<el-drawer>中嵌套<el-drawer>时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
786 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9112 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
前端开发
element菜单组件样式修改NavMenu导航菜单
本文介绍了如何修改Element UI的NavMenu导航菜单组件的样式,包括激活菜单项的颜色、菜单项hover颜色、父级菜单hover颜色以及菜单行高。提供了相应的CSS代码示例,并展示了如何将这些样式应用到实际的NavMenu组件中。
1117 3
element菜单组件样式修改NavMenu导航菜单
简单易操作 VsCoe离线安装插件【步骤+图片+插件】
这篇文章介绍了在Visual Studio Code (VSCode) 中进行离线安装插件的详细步骤,包括如何下载插件、以SVN插件为例的离线安装过程、通过命令行安装以及一个更加简单的离线安装方式,还提供了操作界面的截图帮助理解。
简单易操作 VsCoe离线安装插件【步骤+图片+插件】
|
10月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
398 0
|
JavaScript
成功解决:el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。(每次页面刷新后、第一次打开dialog窗口、图片数不加载)
这篇文章分享了解决Vue中`el-dialog`弹出窗口在第一次打开时数据未加载问题的技巧,通过改变组件的`key`属性来强制Vue重新渲染DOM,从而确保数据正确加载。
成功解决:el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。(每次页面刷新后、第一次打开dialog窗口、图片数不加载)
element table配合from实现双击可编辑表格
如何使用Element UI的el-table和el-form组件实现双击可编辑的表格。
285 0
|
容器
Vite项目当中的SVG图标的配置及图标全局组件的封装
Vite项目当中的SVG图标的配置及图标全局组件的封装
396 0

热门文章

最新文章