[slider] 在 visible 默认为 false 的 popup 中显示异常

[mkdirnow]

tdesign-mobile-vue 版本

1.3.4

重现链接

No response

重现步骤

<script lang="ts" setup>
const visible = ref(false)
const range = ref({
  0: '-',
  1: '2H',
  2: '6H',
  3: '12H',
  4: '1D',
  5: '3D',
})
const value = ref(0)
</script>

<template>
  <div>
    <t-button @click="visible = true">
      open
    </t-button>

    <t-popup v-model="visible" placement="top">
      <t-slider v-model="value" theme="capsule" :marks="range" :min="0" :max="5" />
    </t-popup>
  </div>
</template>

期望结果

实际结果

框架版本

Nuxt(3.13.0)

浏览器版本

Chrome(128.0.6613.85)

系统版本

MacOS(14.6.1)

Node版本

22.6.0

补充说明

No response

[mkdirnow]

倒有个折中办法，使用 popup 的 open 事件来控制 slider 的显示

<script lang="ts" setup>
const popupVisible = ref(false)
const sliderVisible = ref(false)
const range = ref({
  0: '-',
  1: '2H',
  2: '6H',
  3: '12H',
  4: '1D',
  5: '3D',
})
const value = ref(0)

async function beforePopupOpen() {
  await nextTick()
  sliderVisible.value = true
}
</script>

<template>
  <div>
    <t-button @click="popupVisible = true">
      open
    </t-button>

    <t-popup v-model="popupVisible" placement="top" @open="beforePopupOpen">
      <t-slider v-if="sliderVisible" v-model="value" theme="capsule" :marks="range" :min="0" :max="5" />
    </t-popup>
  </div>
</template>

[mkdirnow]

糟糕，如果 popup 配置了 destroyOnClose，上述方法也会失效

[anlyyao]

@mkdirnow 目前最快的处理方式是 在t-popup 上加一个 v-if="visible" 条件，确保 slider 渲染正常。 这个问题我们也会尽快优化～