时间戳

首页 > 解决方案 > 使用轮播在 Nuxt 应用程序中引发“未定义 Flickity”的自定义按钮

javascript - 使用轮播在 Nuxt 应用程序中引发“未定义 Flickity”的自定义按钮

问题描述

我正在尝试将我自己的自定义按钮连接到 nuxt 应用程序中的 flickity 轮播。在我的轮播组件中，我有这个代码

<template>
    <ClientOnly>
        <Flickity
            ref="flickity"
            :key="keyIncrementer"
            class="carousel"
            :class="{ 'carousel--active': active }"
            :options="computedOptions"
        >
            <slot />
        </Flickity>
    </ClientOnly>
</template>

<script>
export default {
  beforeCreate() {
      var flkty = new Flickity(".carousel");
      // previous
      var previousButton = document.querySelector('.button--previous')
      previousButton.addEventListener('click', function () {
          flkty.previous()
      })
      // next
      var nextButton = document.querySelector('.button--next')
      nextButton.addEventListener('click', function () {
          flkty.next()
      })
  },
  beforeDestroy() {
      window.removeEventListener('resize', this.debounceRefresh)
      nextButton.removeEventListener('click', function () {
          flkty.next()
      })
      previousButton.removeEventListener('click', function () {
          flkty.previous()
      })
  },
}
</script>

在我的插件文件夹中，我有一个 vue-flickity.js 文件

import Vue from 'vue'
import Flickity from 'vue-flickity'

Vue.component('Flickity', Flickity)

无需尝试使用我自己的自定义按钮，轮播就可以正常工作。但是使用自定义按钮时，我会收到一条错误消息ReferenceError Flickity is not defined，此行 => 显然我在这里做错了什么，但是什么？var flkty = new Flickity(".carousel");Missing stack frames

标签： javascriptvue.jsnuxt.jsflickityvue-flickity

解决方案

您对Flickityin的使用new Flickity()假定Flickity构造函数（来自flickitypackage）是全局定义的（可能是 by vue-flickity），但事实并非如此。此外，flickity也不vue-flickity打算像那样同时使用。

要将/方法绑定为您自己的按钮的vue-flickity处理程序，请在调用/的按钮上使用处理程序：nextprevious@clickthis.$refs.flickity.next()this.$refs.flickity.previous()

<Flickity ref="flickity" class="carousel">...</Flickity>
<button @click="next">Next</button>
<button @click="prev">Prev</button>

export default {
  methods: {
    next() {
      this.$refs.flickity.next()
    },
    prev() {
      this.$refs.flickity.previous()
    },
  },
}

这实际上与vue-flickity使用文档中的示例相同。

演示

推荐阅读