ant-desgin中文字超出部分省略号隐藏并显示tooltip提示

最新推荐文章于 2024-09-25 17:58:10 发布

旅程丶

最新推荐文章于 2024-09-25 17:58:10 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 vue.js typescript

本文链接：https://blog.youkuaiyun.com/weixin_44804557/article/details/125976244

这篇博客详细介绍了如何使用Vue和TypeScript创建一个自定义的Tooltip组件。该组件根据内容宽度动态显示tooltip，并处理了滚动时的定位问题。通过监听鼠标移入事件来控制tooltip的显示和隐藏，提供了更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <a-tooltip v-if="isShowTooltip" placement="top" :get-popup-container="parentNode">
    <template #title>
      <span>{{ content }}</span>
    </template>
    <div class="content">
      <span>{{ content }}</span>
    </div>
  </a-tooltip>
  <div v-else class="content" @mouseenter="mouseEnter">
    <span ref="contentRef">{{ content }}</span>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

defineProps({
  content: {
    type: String,
    default: '',
  },
  width: {
    type: Number,
    default: 100,
  },
})

const contentRef = ref()
const isShowTooltip = ref<boolean>(false)
/**
 * @description: 鼠标移入事件
 */
const mouseEnter = () => {
  if (contentRef.value.parentNode.offsetWidth > contentRef.value.offsetWidth) {
    isShowTooltip.value = false
  } else {
    isShowTooltip.value = true
  }
}
/**
 * @description: 处理滚动tooltip定位问题
 * @param {HTMLElement} parentNode 节点属性
 */
const parentNode = (triggerNode: HTMLElement) => triggerNode.parentNode
</script>

<style scoped>
.content {
  width: v-bind(width + 'px');
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

在页面中引入
import Tooltip from ‘@/components/Common/ToolTip.vue’ // 根据自己文件位置引入

<tooltip :content="text" :width="column.width" />