classroom/src/components/ellipsisScroll/ellipsisScroll.vue

<!--
* @FileDescription: 文本超出显示省略号 移动鼠标上去滚动显示
* @Author: 黄琪勇
* @Date:2024-03-25 11:50:36
-->
<template>
   <div class="xx">
      <div ref="ellipsisScrollDom" :class="{ isScroll: isScroll }" class="ellipsisScroll">
         {{ props.title }}
      </div>
   </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue"

const props = defineProps<{
   title: string
}>()

const ellipsisScrollDom = ref<HTMLElement>()
const isScroll = ref(false)

onMounted(() => {
   ellipsisScrollDom.value?.addEventListener("mouseenter", handleIsScroll)
   ellipsisScrollDom.value?.addEventListener("mouseleave", handleLeaveScroll)
})
onUnmounted(() => {
   ellipsisScrollDom.value?.removeEventListener("mouseenter", handleIsScroll)
   ellipsisScrollDom.value?.removeEventListener("mouseleave", handleLeaveScroll)
})

let widthCalc = 0

function handleIsScroll(e: MouseEvent) {
   const target = e.target as HTMLElement
   widthCalc = target.scrollWidth - target.clientWidth
   if (widthCalc > 0) {
      isScroll.value = true
   } else {
      isScroll.value = false
   }
}
function handleLeaveScroll() {
   isScroll.value = false
}
</script>

<style lang="scss" scoped>
.xx {
   width: 100%;
}
.ellipsisScroll {
   width: 100%;
   display: inline-block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   line-height: 16px;
   &.isScroll {
      &:hover {
         width: auto;
         overflow: visible;
         animation: 3s roll linear infinite normal;
      }
      @keyframes roll {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-clac(100% - v-bind(widthCalc + "px")));
         }
      }
   }
}
</style>