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

Question

我已经在我的项目中导入了vue-strap carousel component，它工作得很好，但我还需要向它添加进度条。有没有办法将进度条集成或添加到vue-strap carousel中？

进度条组件示例：

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

Answer 1

我不是Vue专家，但我认为，您的问题没有直接的解决方案，因为Carousel不会发出任何包含当前显示内容信息的事件。我可以想到两种变通方法：

1. Hack VueStrap：

- add emit of slide event to Carousel object
- add some enumeration to items, for example add them props with id, so that you can send this ID with slide event

​

1. 在旋转木马周围创建包装器。侦听click事件，然后在click事件的处理程序中，选择with jQuery all items，并循环遍历它们，查找具有active类的项。

知道哪个项目是活动的，并且知道它们的数量，你可以使用进度条的set(progress)方法来正确地设置它。