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

Question

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

我正在使用这个 vue-carousel

vue-carousel

他们在文档中写了关于事件的导航，但我不知道如何使用它。任何方向？谢谢!

例子:

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

Answer 1

与任何自定义 Vue 组件一样，您可以绑定(bind) event listeners使用 v-on 或 @ 速记:

<carousel @navigation-click="navigationHandler">

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

{
  ...,

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

您可以使用相同的约定来收听任何包的 custom events .

---

更新:

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

1. 正确绑定(bind)属性——使用kebab-case而不是驼峰式:

<carousel :navigate-to="manualNavigation">

1. 创建 manualNavigation 数据属性:

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

1. 手动更新 manualNavigation 属性:

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

现在，无论何时您调用 GoToPage5()，轮播都应该通过对您的第 5 张幻灯片进行动画处理来响应。