vue.js - 如何在 vue-Carousel 中使用事件？

Question

我想使用方法中的函数在我的轮播中导航。

我正在使用这个 vue-carousel

vue 轮播

他们在文档中写了有关要导航的事件，但我不知道如何使用它。有什么方向吗？谢谢！

例子：

methods: {
    GoToPage5:function(){
      //use Carousel events here    
    },

标签： vue.jscarousel

Answer 1

与任何自定义 Vue 组件一样，您可以使用, 或简写来绑定事件侦听器：v-on@

<carousel @navigation-click="navigationHandler">

然后在您的 Vue 配置中，您提供处理程序方法：

{
  ...,

  methods: {
    navigationHandler(direction) {
      // direction = "backward" or "forward"
    }
  },

  ...
}

您可以使用相同的约定来监听任何包的自定义事件。

---

更新：

由于您希望使用该:navigate-to属性，因此您需要执行以下操作：

1. 正确绑定到属性 - 使用kebab-case而不是 camel-case：

<carousel :navigate-to="manualNavigation">

2. 创建manualNavigation数据属性：

{
  data() {
    return {
      ...
      manualNavigation: 5,
      ...
    }
  }
}

3. 手动更新manualNavigation属性：

{
  ...
  methods: {
    GoToPage5() {
      this.manualNavigation = 5;
    },
  }
}

现在，任何时候调用GoToPage5()，轮播都应该通过动画来响应您的 5 幻灯片。