vueComponent / ant-design-vue

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

Home Page:https://antdv.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tooltip或Popover组件子元素data-v标签丢失

LiuZheAb opened this issue · comments

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.20

Environment

Vue 3.2.47

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Tooltip或Popover组件子元素初始化时v-if="false",后续异步置为true,会导致子元素丢失v-data标签,进而使scoped样式不生效

<script setup>
import { Popover, Tooltip } from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import { ref } from "vue";

const show = ref(false);
setTimeout(() => {
show.value = true;
}, 200);
</script>

<template>
<Tooltip title="title">
<span class="red" v-if="show">tooltip-hover</span>
</Tooltip>
<br />
<Popover>
<template #content> content </template>
<span class="red" v-if="show">popover-hover</span>
</Popover>
</template>

<style scoped>
.red {
color: red;
}
</style>

What is expected?

子元素携带v-data标签,scoped样式生效

What is actually happening?

子元素丢失v-data标签,scoped样式未生效

试了下 v-show 可以解决这个问题

试了下 v-show 可以解决这个问题

是的,或是把v-if挂在Tooltip / Popover这一层也可以(目前业务代码用的这个方式)。这里只是想把case暴露出来

v4仍旧存在这个,需要验证一下是否是Vue Teleport的特性