vue组件组件层级弹出框dialog显示问题

最新推荐文章于 2024-03-12 21:57:50 发布
最新推荐文章于 2024-03-12 21:57:50 发布
阅读量1k 收藏 1
点赞数
分类专栏： element 文章标签： vue.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/canyi8023/article/details/120362463
版权

Element 使用dialog框是内容框和遮罩层的层级不对

 出现这种情况只要在弹出框架的属性上加上 append-to-body

 完美解决。

 

healer-
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Dialog的弹出位置控制
我点灯的博客
03-25 9873
Dialog一般出现都是屏幕中心，但有的时候我们希望它能在屏幕左侧，或者右侧亦或者是屏幕顶部。这时候我们就需要用的Dialog.getWindow().getAttributes()方法啦 dialog = new Dialog(getActivityContext()); dialog.setContentView(localView); //下面的几个属性可能也会经常用...
Vue3+Element Plus中dialog层级显示出错
weixin_44079946的博客
04-04 1940
dialog层级错乱
vue弹出框组件封装实例代码
10-16
主要介绍了vue弹出框组件封装，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue3+elementPlus：el-dialog弹窗内容在其内部滚动，自己位置不随内容改变
意初的博客
03-02 1361
vue3+elementPlus：el-dialog弹窗内容在其内部滚动，自己位置不随内容改变
vux-popup-dialog遮罩在最上层解决办法 z-index问题
Front小思的博客
07-12 2244
今天遇到的问题是，vux组件框架中使用弹窗，有多层弹窗，vux popup mask遮罩的z-index问题，找了相关解决方法，感觉那有点麻烦​！ 一、改组件的源码 在一个页面的子组件中引用vux的popup组件时，出现mask遮罩在最上层的问题，百度了一下发现有两种解决办法，现提供第三种。 popup在子组件引用时，vux将vux-popup-mask默认添加到body末尾，如果引用popup的子组件的根节点未添加z-index属性，子元素无论层级多高都会被遮罩，mask会在最上层。 所以解决办法就是.
vue2.0 el-dialog封装，修改源代码样式自适应屏幕浏览器，根据参数显示弹框位置左中右
qq_28813031的博客
12-30 1542
<!--作者：dingwangjun--> <!-- 界面描述：el-dialog弹出框。据需求传递参数,显示弹框的位置[左中右] --> <template> <el-dialog :customClass="[location=='左' ? 'dialogLeft' : location=='中'? 'dialogCenter' : 'dialogRight']" class="selfDialog" :visible.sync.
Element 使用dialog框是内容框被遮罩层 层级问题
weixin_43461119的博客
09-06 767
默认为true el-dialog的显示层和遮罩层都设置了position:fixed 问题解决方法：el-dialog设置:modal- append-to-body=“false”属性 让遮罩层插入dialog的父级元素上
elementUI dialog 对话框层级问题
LJJONESEED的博客
09-09 1644
这个属性的含义是：Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true。没有加这个属性的时候，dialog与body同级，所以会导致以上的情况。解决办法：加一个 append-to-body 就好啦。如果 弹出框是一张图片，被遮罩层遮住了。
vue-treeselect只能选择叶子节点，限制选择等级
热门推荐
apple_1900的博客
02-11 1万+
<treeselect **:disable-branch-nodes="true"** //禁用可打开的节点 v-model="orgInfo" value-format="object" ...
vue element-ui 关于遮罩层挡住了dialog对话框的问题
weixin_44408018的博客
02-19 402
遇到遮罩层挡住对话框，调整对话框位置，一般放在最前面
使用vue实现各类弹出框组件
10-16
主要介绍了使用vue实现各类弹出框组件,文中给大家提到了vue中常用的dialog组件的封装，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue组件实现弹出框点击显示隐藏效果
12-12
由于我的更改密码弹出框是一个组件引用的，所以在一开始是隐藏的，这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候，操作执行完后当前页面的更改按钮已经被弹出框覆盖了。所以只能在弹出...
vue-dialog的弹出层组件
08-31
主要为大家详细介绍了vue-dialog的弹出层组件，可以通过npm引用的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解用vue编写弹出框组件
08-30
本篇文章主要介绍了详解用vue编写弹出框组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue消息弹出框组件需要的文件
04-15
1，弹出框显示包括info, warning, success, error, normal五种预定义样式，也可自定义； 2，支持自动关闭和点击关闭，放了关闭监听函数和点击消息框监听函数，放在增加后续行为； 3，放了获取消息和更新消息状态的...
el-dialog出现在下层(遮罩下)解决
Super_hzj的博客
03-14 1969
el-dialog出现在遮罩层下
vue中使用el-dialog设置弹窗对话框在前端显示为居中
caixiaokui994的博客
09-08 2200
废话不多直接上图
【VUE】解决el-dialog的内容不在前面显示问题
最新发布
学无止境
03-12 369
【VUE】解决el-dialog的内容不在前面显示问题
关于将el-dialog在局部区域中显示的问题
BUST_ORANGE的博客
05-12 2260
一般来说el-dialog都是通屏显示的，那么如何将它放在某一处div中显示出来，请按如下步骤操作： 1.添加el-dialog代码段 2.在外面包裹一层div <div class="dialog-box"> <el-dialog title="提示" :modal-append-to-body='false' :append-to-body="false" :visible.sync="repealVis.
js 调用vue组件显示dialog框
06-03
要在JS中调用Vue组件并显示dialog框，同样可以先创建一个全局的dialog组件，然后在需要显示dialog的地方调用该组件。 下面是实现的步骤： 1. 创建全局的dialog组件 在Vue实例的components属性中注册一个全局的dialog组件，并在模板中显示需要展示的内容。 ```js Vue.component('dialog', { props: { title: String, content: String }, template: ` <div class="dialog"> <div class="dialog__header">{{title}}</div> <div class="dialog__content">{{content}}</div> </div> ` }); ``` 在上面的代码中，我们创建了一个名为dialog的组件，该组件接收两个props：title和content，分别表示dialog的标题和内容。在模板中，我们通过插值表达式将这两个props渲染到页面上。 2. 在需要显示dialog的地方调用该组件 在需要显示dialog的地方，可以通过Vue实例的$mount方法创建一个新的Vue实例，并将dialog组件作为选项传递给该实例的components属性。然后，将该实例的$el属性插入到DOM中，显示dialog组件。 ```js function showDialog(title, content) { let dialogInstance = new Vue({ el: document.createElement('div'), components: { 'dialog': Vue.component('dialog') }, template: '<dialog :title="title" :content="content"></dialog>', data: { title, content } }); document.body.appendChild(dialogInstance.$el); } ``` 在上面的代码中，我们创建了一个名为showDialog的函数，用于显示dialog组件。该函数通过创建一个新的Vue实例来显示dialog组件，并将该实例的$el属性插入到DOM中。在模板中，我们通过绑定数据的方式将传入的title和content渲染到页面上。 3. 隐藏dialog组件 在需要隐藏dialog的地方，可以通过销毁dialog实例来隐藏dialog组件。 ```js function hideDialog() { let dialogEl = document.querySelector('.dialog'); if (dialogEl) { dialogEl.parentNode.removeChild(dialogEl); } } ``` 在上面的代码中，我们创建了一个名为hideDialog的函数，用于隐藏dialog组件。该函数通过查询DOM中是否存在dialog元素，如果存在则删除该元素，从而隐藏dialog组件。 综上所述，我们可以通过创建全局的dialog组件，并在需要显示dialog的地方调用该组件来显示dialog框。同时，可以通过销毁dialog实例来隐藏dialog组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值