uniapp开发时使用uni-datetime-picker组件 但是出现了遮挡问题

Question

uni-datetime-picker

uniapp开发时使用uni-datetime-picker组件 但是出现了遮挡问题 使用z-index无效
目前打算在 弹窗打开时 隐藏遮盖部分
但是不知道如何检测到弹窗的状态
麻烦各位支招～

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  目前我了解到的问题是在UniApp开发中使用uni-datetime-picker组件时出现遮挡问题，尝试使用z-index属性解决但无效。需要在弹窗打开时隐藏遮盖部分并检测弹窗状态。 根据参考资料提供的代码段落0和段落1，可以看到在popTimer.visible为true时添加了index.popPicker样式来控制遮罩层的显示。但是在popTimer.visible为true时，其他的元素的pointer-events属性为all。

  解决这个问题的方法是在显示弹窗时，将其他元素的pointer-events属性设置为none，使其不可点击，从而隐藏遮盖部分。可以通过修改CSS样式来实现。

  可以尝试以下代码：

  .index {
      pointer-events: none;
  }
  
  .popPicker .index {
      pointer-events: all;
  }
  

  以上代码将.index元素的pointer-events属性默认设置为none，当.popPicker元素存在时，将其内部的.index元素的pointer-events属性设置为all。

  另外，还需要检测弹窗的状态，可以在弹窗打开或关闭时添加监听事件。

  可以参考以下代码：

  // 在弹窗打开时添加监听事件
  this.$nextTick(() => {
    const picker = document.querySelector('.mint-popup');
    // 添加事件监听
    picker.addEventListener('transitionend', this.detectPickerState);
  });
  
  // 在弹窗关闭时移除事件监听
  this.$nextTick(() => {
    const picker = document.querySelector('.mint-popup');
    // 移除事件监听
    picker.removeEventListener('transitionend', this.detectPickerState);
  });
  
  // 监听事件触发时的处理函数
  detectPickerState(event) {
    const picker = event.currentTarget;
    const isVisible = window.getComputedStyle(picker).getPropertyValue('visibility') === 'visible';
    if (isVisible) {
      // 弹窗已打开
      // 处理逻辑...
    } else {
      // 弹窗已关闭
      // 处理逻辑...
    }
  }
  

  以上代码通过监听弹窗的transitionend事件来检测弹窗的状态。在事件触发时，可以通过获取弹窗的visibility属性值来判断弹窗是否可见，从而进行相应的处理。

  以上代码是基于给出的参考资料和问题描述的理解给出的解决方案，希望对您有所帮助。如果您还有其他问题，请随时提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^