1

我正在尝试在 Nuxt 应用程序中实现轮播。这是我的 package.json

 "dependencies": {
    "@nuxtjs/i18n": "^7.0.3",
    "core-js": "^3.15.1",
    "flickity": "^2.2.2",
    "lodash": "^4.17.21",
    "nuxt": "^2.15.7",
    "postcss-nesting": "^8.0.1",
    "throttle-debounce": "^3.0.1",
    "vue-flickity": "^1.2.1"
  },

这是我的代码

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

<script>

import Flickity from 'vue-flickity'

const DEFAULT_OPTIONS = {
  cellAlign: 'left',
  pageDots: true,
  prevNextButtons: true
}
export default {
  components: {
    Flickity,
  },
  name: 'BaseCarousel',
  props: {
    active: {
      type: Boolean,
      default: true
    },
    options: {
      type: Object,
      required: false,
      default: () => ({})
    }
  },

如果我不注释掉import Flickity from 'vue-flickity'， components: { Flickity, },我会收到此错误消息。

错误信息

我不明白这里有什么问题。如果有人知道请帮忙...

4

3 回答 3

2

您是否添加了以下内容plugins/vue-flickity.js：

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

Vue.component('Flickity', Flickity)

?

也添加到nuxt.config.js

plugins: [
  { src: '~/plugins/vue-flickity.js', ssr: false },
]
于 2021-10-14T15:36:24.447 回答
2

另一种解决方法是仅在客户端本地注册vue-flickity为异步组件：

export default {
  components: {
    [process.browser && 'Flickity']: () => import('vue-flickity'),
  }
}

演示

于 2021-10-16T07:03:07.293 回答
2

将其作为插件导入是一种解决方案，如下所示：https ://github.com/drewjbartlett/vue-flickity/issues/38#issuecomment-906280271

同时，它根本不是最优的。
使用动态导入导入它可能是一种解决方案，我正在尝试找到一种正确编写它的方法。

更新的答案

这似乎在我这边工作正常，你能确认一下吗？

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

<script>
import Vue from 'vue'

const DEFAULT_OPTIONS = {
  cellAlign: 'left',
  pageDots: true,
  prevNextButtons: true,
}

export default {
  name: 'BaseCarousel',
  props: {
    active: {
      type: Boolean,
      default: true,
    },
    options: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  },
  async mounted() {
    if (process.browser) {
      const Flickity = await import('vue-flickity')
      Vue.component('Flickity', Flickity)
    }
  },
}
</script>
于 2021-10-14T13:56:29.290 回答