vue3+ts封装打字机效果组件

<template>
  <div class="marquee-container">
    <div
      class="marquee-text"
      :style="{
        'animation-duration': duration + 's',
        'animation-delay': delay + 's'
      }"
      :ref="setTextAnimate"
    >
      {{ text }}
    </div>
    <div
      class="marquee-text cloned"
      :style="{
        'animation-duration': (duration + delay) + 's'
      }"
    >
      {{ text }}
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue';
 
export default defineComponent({
  name: 'MarqueeText',
  props: {
    text: {
      type: String,
      required: true
    },
    duration: {
      type: Number,
      default: 10
    },
    delay: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const setTextAnimate = ref<HTMLElement | null>(null);
 
    const setAnimate = () => {
      if (setTextAnimate.value) {
        const style = window.getComputedStyle(setTextAnimate.value);
        const width = style.width;
        setTextAnimate.value.style.setProperty('animation-iteration-count', 'infinite');
        setTextAnimate.value.style.setProperty('width', `${parseInt(width) * 2}px`);
      }
    };
 
    onMounted(setAnimate);
    watch(() => props.text, setAnimate);
 
    return { setTextAnimate };
  }
});
</script>
 
<style scoped>
.marquee-container {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
 
.marquee-text {
  position: absolute;
  animation-name: marquee;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-direction: alternate;
}
 
.cloned {
  position: relative;
  animation: none;
}
 
@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
</style>

这个代码实例展示了如何在Vue 3和TypeScript中创建一个简单的打字机效果组件。组件接收文本、持续时间和延迟作为props，并使用<style scoped>保证样式只作用于当前组件。在setup函数中，我们使用ref来获取文本元素的引用，并在onMounted钩子中调用setAnimate函数来设置动画属性。setAnimate函数计算文本宽度并设置动画属性，使得文本无限循环滚动。