TnPopup组件在进入页面后在生命周期中立即设置显示状态时，显示不出来

[misterch]

• tnui版本：1.0.20

<template>
  <tn-popup v-model="show" width="620">
    <view>hello</view>
  </tn-popup>
</template>
<script setup lang=ts>
import { onMounted, ref } from 'vue'
const show = ref(false)
//在onMounted外立即设置为true，可以显示
//show.value = true
onMounted(()=>{
  //在onMounted中，有时直接不显示，有时会闪烁一下消失
  show.value = true
  //延时执行就可以显示
  //setTimeout(()=>{
  // show.value = true
  //},200)
})
</script>

[misterch]

技术群加不到，提示的另外一个群显示不存在！

[cathcy8869]

技术群加不到，提示的另外一个群显示不存在！

加微信 Y64556015

[wzmcoding]

同问：可自己实现一个简单的popup，

<script setup lang="ts">
/**
 * 自定义弹窗，解决TnPopup 在生命周期里不弹出的问题
 */
defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
})
</script>

<template>
  <div v-if="modelValue" class="fixed z-50 h-screen w-full bg-[#000]/60" @click="$emit('close')">
    <div class="fixed left-1/2 top-1/2 z-9999 w-[95%] transform rounded-lg bg-white -translate-x-1/2 -translate-y-1/2">
      <slot />
    </div>
  </div>
</template>

[mirari]

源码use-popup.ts中存在以下代码：

watch(
    () => props.modelValue,
    (value) => {
      if (value) {
        // 略
      } else {
        // 略
        setTimeout(() => {
          visiblePopup.value = false
        }, 250)
        // 略
      }
      initPopupModelValue = true
    },
    {
      immediate: true,
    }
  )

这个立即执行的watch方法，在传入值为false时，会在250毫秒后执行一个关闭操作。 导致以下代码展示的弹窗被意外关闭:

const visible = ref(false)
onMounted(() => {
  // 略
  visible.value = true
})

强行加入一个250毫秒的延迟才可以避免该问题：

const visible = ref(false)

onMounted(() => {
  setTimeout(() => {
    visible.value = true
  }, 251)
})