我正在尝试将我自己的自定义按钮连接到 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