首页 > 其他分享 >无界(wujie)微前端子应用elementUI时,dialog中使用Select、TimePicker等组件,弹出框位置异常解决方案

无界(wujie)微前端子应用elementUI时,dialog中使用Select、TimePicker等组件,弹出框位置异常解决方案

时间:2024-05-26 22:02:26浏览次数:9  
标签:应用 elementUI 在子 TimePicker wujie dialog 出框 Select

无界(wujie)微前端子应用elementUI时,dialog中使用Select、TimePicker等组件,弹出框位置可能会异常,如图:

解决方法参考:
public/index.html文件
1、body中加style="position:relative"
2、script中加
if(window.__POWERED_BY_WUJIE__){ Document.documentElement.classList.add(“isDialog”) //无界环境下向Document添加一个指定的CSS类名 }
3、style中加
.isDialog .el-popper{ position:absolute !important;//Select、TimePicker等组件点击后的弹出框都是el-popper }
还没完,此时原先位置在子应用范围之内的弹出框已经正常,但如果原先位置在子应用范围之外的弹出框仍然会被挤错位。如图:

此时解决方案有二:
⑴ 控制dialog的宽度,让弹出框的位置在子应用范围内;
⑵ 将dialog定位在子应用范围之内。如图:

标签:应用,elementUI,在子,TimePicker,wujie,dialog,出框,Select
From: https://www.cnblogs.com/jonight/p/18214362

相关文章

  • Java项目:校园周边美食探索(java+SpringBoot+Mybaits+Vue+elementui+mysql)
    源码获取:俺的博客首页"资源"里下载! 项目介绍基于Springboot+vue实现的校园周边美食探索及分享平台本系统包含管理员、用户两个角色。管理员:用户管理、美食鉴赏管理、好友管理、收藏管理、系统管理用户:登录、注册、个人中心管理、美食鉴赏管理、好友管理、收藏管理......
  • elementUI 使用 el-select 的远程搜索功能,导致数据无法回显怎么解决?
    问题:解决方法:在数据初始化的时候将获取到的数据做进一步的处理,进行本地select组件的一个添加constlabels=[];constvalues=[];res.data.rows.forEach((ele)=>{labels.push(ele.buildName);values.push(ele.buildCode)......
  • elementUI中Vue 2方式<el-table>表格中列表列头内容过长,不换行处理
    使用render-header属性<el-table-column...:render-header="headerRender"></el-table-column>methods:{headerRenderer(h,{column}){//使用h函数创建VNode,防止表头内容换行returnh('div',{style:{......
  • vue2使用elementUI组件el-tooltip指定元素进行提示信息(图标显示信息)
     <el-table-columnprop="operation"label="操作"borderwidth="200px"><templateslot-scope="scope"><divclass="operation-icons"><!......
  • Vue+elementUI-创建项目
    创建VUE项目vuecreatemy-project后会出现选项,反正我选择的是自定义创建,第三个  之后选2.X选一堆配置,案子自己需求配置然后 然后进入到我们的项目目录,可以运行   这个安装好了以后,到element.ui的官方文档地址:https://element.eleme.cn/#/zh-CN/compo......
  • ElementUI——elementui重复引入样式
    前言按着文档操作后发现存在样式重复引入的问题,尝试了一系列的配置都未生效,最终是直接生成样式导入解决;文档:https://element.eleme.io/#/zh-CN/component/custom-theme#yin-ru-zi-ding-yi-zhu-ti工具:https://elementui.github.io/theme-chalk-preview/#/zh-CN内容使用工具生......
  • Vue入门到关门之第三方框架elementui
    1、什么是ElementUI?ElementUI是一个基于Vue.js的组件库,它提供了丰富的UI组件和一套完整的解决方案,用于快速构建现代化的Web应用程序。ElementUI的目标是帮助开发者快速构建出美观、易用的界面,并提供了丰富的组件,包括但不限于按钮、表单、表格、对话框、菜单、导航、布......
  • elementui使用
      1#1开源的样式库,方便在vue中使用2-elementui:饿了么团队开源的web端3https://element.eleme.cn/#/zh-CN4-vant:有赞团队,移动端5https://vant-ui.github.io/vant/#/zh-CN6-antdesign:阿里团队7https://1x.antd......
  • 图文解说ChinaCock日期组件CCDateTimePicker(二)
    上文,介绍了CCDateTimePicker基本用法,实现日期、时间等各种日期格式的输入,用法简单,代码简洁。能不能用这个控件,来实现自定义的输入格式呢?答案是能。比如:我的需要求就遇到这样的情况,用户要选择星期几的方式,如下图,是已经实现的结果: 接下来看看如何实现的?第一步,先定义一个数组: ......
  • el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-cha
        写这篇博客的原因是前段时间做了一个数据列可变的表格,同时需要实现在网页中更新了数据列之后,能够对表格进行排序的需求。如果想要直接了解实现el-table的动态数据动态排序(列数据是通过计算获得,并且可以在页面中修改,在此基础上实现数据变化后实时更新)。请直接跳到......