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

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

鼠标移入的时候判断，此处使用了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;
}