a-tooltip组件当content为空值时,不显示tooltip组件
什么情况下tooltip的内容会为空呢?
那当然是动态渲染的时候,content内容不固定,有可能管理员在表中压根没设置该值。
当值为空时,悬浮窗口会正常显示出来,只不过没有内容。
官网上也没有提供具体的参数可以控制它,当用v-if或v-show,根据值动态控制它时,发现连tooltip里层的按钮也给隐藏了。
为了解决上面的问题,自己对tooltip又封装了一层,根据content属性的是否有值,来实现,当没有值时悬浮时只有按钮没有tooltip
tooltip组件封装,里层包装的时arco disign的tooltip
<template>
<span v-if="['', null, undefined].indexOf(content) === -1">
<a-tooltip :content="content">
<slot></slot>
</a-tooltip>
</span>
<span v-else>
<slot></slot>
</span>
</template>
<script lang="ts" setup>
const props = defineProps({
content: {
type: String,
default: '',
},
});
</script>
组件调用
<template>
<tooltip :content="item.style.tooltip">
<a-button
v-if="item.type === 'button'"
size="small"
type="primary"
@click="toolbarClick(item.clickId)"
>
{
{ item.style.name }}</a-button
>
</tooltip>
</template>
<script lang="ts" setup>
import Tooltip from './tooltip.vue';
</script>