🐛 [Bug]: TinyTooltip 使用 render 函数渲染问题

[chilingling]

Version

latest

Vue Version

latest

Link to minimal reproduction

playground 链接

Step to reproduce

实际表现：无法动态切换 content 插槽内容。

告警：

代码：

<template>
  <div class="box">
    <tiny-button @click="handleClick">
      开关
      <template v-if="showContent" #default>
        <span>fafdsfsd</span>
      </template>
    </tiny-button>
    
    <div class="top">
      <custom-tooltip></custom-tooltip>
<!--       <tiny-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start" :manual="true" :modelValue="true" data-uid="aaaa">
        <div data-uid="bbb">
          <div>
        		<tiny-button>上左</tiny-button>   
          </div>
        </div>
        
        <template v-if="showContent" #content>
          <div>
            fdsafsafdasfds
          </div>
        </template>
      </tiny-tooltip> -->
    </div>
  </div>
</template>

<script setup lang="jsx">
import { ref, h } from "vue"
import { TinyTooltip, TinyButton } from '@opentiny/vue'

const showContent = ref(false)

const handleClick = () => {
  showContent.value = !showContent.value
  console.log('showContent.value', showContent.value)
}

const CustomTooltip = () => {
  return h(
    TinyTooltip,
    {
      class: "item",
      effect: "dark",
      content: "Top Left 提示文字",
      placement: "top-start",
      manual: true,
      modelValue: true
    },
    {
      default: () => h(TinyButton, null, "测试"),
      content: () => showContent ? h('div', null, "提示文字fafsfsdfs") : null
    }
  )
}

</script>

<style lang="css" scoped>
.box {
  margin: auto;
}

.box .top {
  text-align: center;
}

.box .left {
  float: left;
  width: 90px;
}

.box .right {
  float: right;
  width: 90px;
}

.box .bottom {
  clear: both;
  text-align: center;
}

.box .item {
  margin: 4px;
  display: inline-block;
}
</style>

What is expected

期望表现：可以动态切换插槽内容

What is actually happening

实际表现：无法动态切换 content 插槽内容。

What is your project name

TinyEngine

Any additional comments (optional)

No response

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: 🐛 [Bug]: TinyTooltip rendering problem using render function

[petercat-assistant[bot]]

您提到在使用 TinyTooltip 时遇到了动态切换插槽内容的问题。根据您提供的代码和描述，问题可能出在 TinyTooltip 的渲染机制上。以下是一些可能的解决方案：

1. 确保响应式数据的正确使用：确保 showContent 是响应式的，并且在状态改变时会触发重新渲染。您已经使用了 ref，这应该是正确的。

2. 检查插槽内容的条件渲染：在 CustomTooltip 组件中，您使用了条件渲染来决定是否显示内容插槽。确保 showContent 的值在点击按钮后确实发生了变化，并且 TinyTooltip 能够检测到这一变化。

3. 更新 TinyTooltip 的 key 属性：有时，Vue 组件可能不会检测到插槽内容的变化。尝试为 TinyTooltip 添加一个 key 属性，并在 showContent 改变时更新这个 key。例如：

   const CustomTooltip = () => {
     return h(
       TinyTooltip,
       {
         class: "item",
         effect: "dark",
         content: "Top Left 提示文字",
         placement: "top-start",
         manual: true,
         modelValue: true,
         key: showContent.value // 使用 showContent 作为 key
       },
       {
         default: () => h(TinyButton, null, "测试"),
         content: () => showContent.value ? h('div', null, "提示文字fafsfsdfs") : null
       }
     )
   }
   

4. 检查 TinyTooltip 的实现：确保 TinyTooltip 组件本身支持动态插槽内容的更新。如果组件内部没有处理插槽内容的变化，可能需要修改组件的实现。

如果这些建议没有解决问题，可能需要进一步查看 TinyTooltip 的源码或相关文档，以确认组件是否支持动态插槽内容的更新。

如果您需要进一步的帮助或想要提交一个问题报告，请告诉我。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[shenjunjian]

计划重构 tooltip的实现！

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Plan to refactor the implementation of tooltip!