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

相关文章
|
前端开发
解决el-descriptions的label-class-name不生效问题
解决el-descriptions的label-class-name不生效问题
2122 0
element 下拉菜单el-dropdown如何更改样式?
element 下拉菜单el-dropdown如何更改样式?
2455 0
element-plus:el-table自定义展开图标处于列的位置
element-plus:el-table自定义展开图标处于列的位置
1367 0
|
算法 安全 JavaScript
通过Postman实现API网关的请求签名与调试
Postman是一个非常强大的HTTP发包测试工具, 目前Postman已经提供了Windows/Mac/Linux系统的客户端的下载,使用很方便。不过API网关的调试,需要对HTTP请求进行签名才能调用,无法使用简单的curl等发包工具完成,但我们可以使用Postman工具提供的Pre-request Script脚本来实现API网关的签名功能,实现API的调试功能。
6996 0
|
JavaScript
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案,vue在<el-drawer>中嵌套<el-drawer>时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案,vue在<el-drawer>中嵌套<el-drawer>时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
1105 0
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
25667 154
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
710 0
|
JavaScript
Vue2横向文字滚动
这篇文章介绍了如何在Vue 2框架中实现一个横向滚动文本的组件,允许自定义滚动文本内容、滚动区域尺寸和滚动速度等属性。
645 0
Vue2横向文字滚动
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
1092 1
|
JSON JavaScript 前端开发
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
1822 0
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法

热门文章

最新文章

下一篇
开通oss服务