如何将进度条添加到vue-strap轮播滑块？

Question

我已在我的项目中导入了vue-strap carousel component并且它运行良好，但我还需要添加进度条。有没有办法在vue-strap轮播中集成或添加进度条？

进度条组件示例：

https://github.com/hilongjw/vue-progressbar

Answer 1

我不是Vue专家，但我认为，没有直接解决您的问题，因为Carousel不会发出任何有关当前显示内容的信息。我可以想到2个解决方法：

1. Hack VueStrap：

   • 将幻灯片事件的发送添加到Carousel对象
   • 为项目添加一些枚举，例如添加带有id的道具，以便您可以使用幻灯片事件发送此ID

2. 在Carousel周围创建包装器。侦听click事件，然后在click事件的处理程序中，使用jQuery选择所有项目，然后遍历它们，查找active类的事件。

了解哪个项目处于活动状态并了解其状态，您可以使用set(progress)进度条方法进行正确设置。