Vue.js Marquee 结束事件实现 - 详解与替代方案

Vue.js 没有内置的 marquee 组件，但可以通过自定义指令来实现。然而，marquee 元素本身并没有结束事件，所以需要通过其他方式来模拟。\n\n以下是一个示例，演示如何使用 Vue.js 实现一个 marquee 元素，并在结束时触发自定义事件：\n\nhtml\n<template>\n <div>\n <div class="marquee" ref="marquee" @animationend="handleAnimationEnd">\n {{ text }}\n </div>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n text: '这是一个 marquee 元素'\n }\n },\n mounted() {\n this.startMarquee()\n },\n methods: {\n startMarquee() {\n const marqueeElement = this.$refs.marquee\n const marqueeWidth = marqueeElement.offsetWidth\n const containerWidth = marqueeElement.parentNode.offsetWidth\n\n if (marqueeWidth > containerWidth) {\n const duration = (marqueeWidth - containerWidth) * 20\n\n marqueeElement.style.animationDuration = duration + 'ms'\n marqueeElement.style.animationName = 'marquee'\n }\n },\n handleAnimationEnd() {\n this.$emit('marquee-end')\n }\n }\n}\n</script>\n\n<style>\n.marquee {\n white-space: nowrap;\n overflow: hidden;\n animation-timing-function: linear;\n animation-iteration-count: 1;\n}\n\n@keyframes marquee {\n 0% { transform: translateX(100%); }\n 100% { transform: translateX(-100%); }\n}\n</style>\n\n\n在上面的示例中，我们使用 @animationend 监听动画结束事件，并在处理函数中触发自定义的 marquee-end 事件。你可以在父组件中监听该事件，并执行相应的操作。\n\n请注意，marquee 元素已经被废弃，不推荐在现代的 Web 开发中使用。上述示例只是为了演示如何在 Vue.js 中实现类似效果。推荐使用 CSS 和 JavaScript 来实现滚动效果，以获得更好的可控性和性能。