elementui关于弹出的卡片,模态框Z-index与自己编写的定位层问题

今天在表格上做了一个右键,你可以认为是一个查看详情,然后呢做了一个遮罩层,遮罩层自己没写,使用的是element的v-loading服务

 this.diffModal = this.$loading({
    lock: true, 
    spinner: ' ',
    background: 'rgba(0, 0, 0, 0.1)'
 });

然后查询详情的面板就是用了 position: fixed;

然后问题来了,在详情面板中的popover、el-dropdown看不到了,最后发现是z-index的问题,如何解决呢,其实就是修改详情面板的z-index即可

 
this.$nextTick(() => {
    this.$el.querySelectorAll('.diff-box')[0].style.zIndex = parseInt(zIndex) + 1;
})
 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI提供了多种类型的弹出框组件,例如el-dialog和MessageBox。el-dialog是一个可定制的弹出框组件,可以用于展示内容、进行交互等。MessageBox是一个快速创建弹出框的方法,可以用于显示提示信息、确认操作等。 在Vue中使用ElementUI弹出框组件时,可以通过this.$confirm方法创建一个确认框,代码如下: ```javascript this.$confirm("没有权益进行这项操作", "提示", { type: "warning", showClose: false, showCancelButton: false, showConfirmButton: false, }) .then(() => {}) .catch(() => {}); ``` 此代码会创建一个类型为warning的确认框,没有关闭按钮、确认按钮和取消按钮,并在2秒后自动关闭。在then方法中可以处理确认操作,而在catch方法中可以处理取消操作。 另外,可以使用el-dialog组件来创建一个可定制的弹出框,代码如下: ```html <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" :show-close="false" > <!-- 弹出框的内容 --> </el-dialog> ``` 这段代码会创建一个弹出框,通过v-model指令和dialogVisible变量来控制弹出框的显示和隐藏。dialogTitle变量用于设置弹出框的标题,close-on-click-modal属性用于禁止点击遮罩关闭弹出框,show-close属性用于隐藏关闭按钮。在弹出框的内容部分可以自定义需要展示的内容。 通过使用这两种方法,你可以根据需要创建不同类型的弹出框,并实现相应的交互和功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值