vue3实现文本超出鼠标移入的时候文本滚动

最新推荐文章于 2024-07-09 14:27:38 发布

2025专业AI写手!

最新推荐文章于 2024-07-09 14:27:38 发布

阅读量683

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/AIB_Kasic/article/details/133647246

Vue 3.0 同时被 3 个专栏收录

101 篇文章

订阅专栏

vue.js

85 篇文章

订阅专栏

javascript

79 篇文章

订阅专栏

文章介绍了如何在鼠标移入时，通过JavaScript和TailwindCSS判断文本长度是否超过容器长度，并在符合条件时添加动画效果。涉及`scrollWidth`、CSS关键帧动画和`.scrollable-text`类的使用。

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

判断文本长度是否大于容器长度

鼠标移入的时候判断，此处使用了tailwindcss，注意一下要设置文本不换行。

 <div
     ref="functionsItems"
     @mouseenter="enterFunctionsItem($event, index)"
          >
           <img class="w-5 h-5" :src="getIcon(item.addition)" />
            <span
              class="whitespace-nowrap"
            >
              {{ item.name }}
            </span>

判断函数

如果大于，则添加动画函数。

const functionsItems = ref([])

function enterFunctionsItem(e, index: number) {
  let width1 = functionsItems.value[index].scrollWidth
  let width2 = functionsItems.value[index].children[1].scrollWidth
  // 减去内间距后对比
  if (width1 - 8 < width2 || width1 - 8 === width2) {
    // 添加class
    functionsItems.value[index].classList.add('scrollable-text')
  }
}

样式

@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.scrollable-text:hover span {
  overflow: visible;
  white-space: nowrap;
  animation: scroll 3s linear infinite;
}