[Component] [dialog] dialog zIndex动态修改的情况下无效

[automan-bot]

Bug Type: Component

Environment

• Vue Version: 3.4.20
• Element Plus Version: 2.6.3
• Browser / OS: edge win10
• Build Tool: Vite

Reproduction

Related Component

• el-dialog

Reproduction Link

Element Plus Playground

Steps to reproduce

我现在界面上有多个弹框，每个弹框可以拖动，且当点击弹框的时候，此弹框要处于界面顶端

What is Expected?

处于顶端

What is actually happening?

弹框的zindex修改成功，但是zindex不是相应式的，真是的zindex并未发生改变，导致未处于顶端

Additional comments

(empty)

[chenxch]

目前部分组件的zIndex都是初始化后固定的，或许可以考虑将其改为计算属性。

[ydaydayup]

我正在准备提一个pr，我先考虑下修改方案

[chenxch]

我正在准备提一个pr，我先考虑下修改方案

可以参考部分组件已经实现的方案

[ydaydayup]

  // const zIndex = ref(props.zIndex ?? nextZIndex())   ---- 改前
  const zIndex = !isUndefined(props.zIndex)
    ? computed(() => props.zIndex)
    : ref(nextZIndex())

我在公司尝试改成如上，是可以解决问题的，具体pr今天下班回家提一个

[chenxch]

  // const zIndex = ref(props.zIndex ?? nextZIndex())   ---- 改前
  const zIndex = !isUndefined(props.zIndex)
    ? computed(() => props.zIndex)
    : ref(nextZIndex())

我在公司尝试改成如上，是可以解决问题的，具体pr今天下班回家提一个

这个写法是存在问题的，如果初始化zIndex是undefined，你后续怎么变更都是使用nextZIndex返回的值，完全可以用计算属性直接解决，建议参考tour组件中的处理方案。

[automan-bot]

  // const zIndex = ref(props.zIndex ?? nextZIndex())   ---- 改前
  const zIndex = !isUndefined(props.zIndex)
    ? computed(() => props.zIndex)
    : ref(nextZIndex())

我在公司尝试改成如上，是可以解决问题的，具体pr今天下班回家提一个

这个写法是存在问题的，如果初始化zIndex是undefined，你后续怎么变更都是使用nextZIndex返回的值，完全可以用计算属性直接解决，建议参考tour组件中的处理方案。

确实是存在问题得

[ydaydayup]

  // const zIndex = ref(props.zIndex ?? nextZIndex())   ---- 改前
  const zIndex = !isUndefined(props.zIndex)
    ? computed(() => props.zIndex)
    : ref(nextZIndex())

我在公司尝试改成如上，是可以解决问题的，具体pr今天下班回家提一个

这个写法是存在问题的，如果初始化zIndex是undefined，你后续怎么变更都是使用nextZIndex返回的值，完全可以用计算属性直接解决，建议参考tour组件中的处理方案。

确实是存在问题得

OK，感谢，我再修改

[ydaydayup]

  // const zIndex = ref(props.zIndex ?? nextZIndex())   ---- 改前
  const zIndex = !isUndefined(props.zIndex)
    ? computed(() => props.zIndex)
    : ref(nextZIndex())

我在公司尝试改成如上，是可以解决问题的，具体pr今天下班回家提一个

这个写法是存在问题的，如果初始化zIndex是undefined，你后续怎么变更都是使用nextZIndex返回的值，完全可以用计算属性直接解决，建议参考tour组件中的处理方案。

pr构建报错，zIndex已经是计算属性了，我是否可以吧 zIndex.value = isUndefined(props.zIndex) ? nextZIndex() : zIndex.value++删除
fix(components): dialog zIndex 修改不生效

[zc-write-code]

  // const zIndex = ref(props.zIndex ?? nextZIndex())   ---- 改前
  const zIndex = !isUndefined(props.zIndex)
    ? computed(() => props.zIndex)
    : ref(nextZIndex())

我在公司尝试改成如上，是可以解决问题的，具体pr今天下班回家提一个

可不可以这样改: const zIndex = computed(() => props.zIndex ?? nextZIndex())

[ydaydayup]

  // const zIndex = ref(props.zIndex ?? nextZIndex())   ---- 改前
  const zIndex = !isUndefined(props.zIndex)
    ? computed(() => props.zIndex)
    : ref(nextZIndex())

我在公司尝试改成如上，是可以解决问题的，具体pr今天下班回家提一个

可不可以这样改: const zIndex = computed(() => props.zIndex ?? nextZIndex())

不可以，，会陷入 无限递归中，我一开始就这么改的