a-tooltip组件当content为空值时,不显示tooltip组件

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>

猜你喜欢

转载自blog.csdn.net/weixin_43865196/article/details/129321210