vue marquee滚动结束事件

Vue Marquee 滚动结束事件可以通过自定义指令来实现。

首先，在Vue的组件中，创建一个自定义指令，例如v-marquee-end：

Vue.directive('marquee-end', {
  inserted: function (el, binding, vnode) {
    // 监听滚动事件
    el.addEventListener('scroll', function () {
      // 判断是否滚动到最右边
      if (el.scrollLeft + el.clientWidth >= el.scrollWidth) {
        // 触发滚动结束事件
        vnode.context.$emit('marquee-end');
      }
    });
  }
});

然后，在需要使用滚动结束事件的地方，使用v-marquee-end指令，并在组件中添加一个marquee-end事件处理函数：

<div v-marquee-end @marquee-end="handleMarqueeEnd">滚动内容</div>

methods: {
  handleMarqueeEnd: function () {
    // 滚动结束事件处理逻辑
    console.log('滚动结束');
  }
}

这样，当滚动内容滚动到最右边时，会触发marquee-end事件，然后执行handleMarqueeEnd方法来处理滚动结束事件