Question

nuxt 与 vue-dragscroll：窗口未定义

2020-03-27

1598

vue.js nuxt.js

我正在尝试将 vue-dragscroll 与 nuxtjs 结合使用。

我是 nuxtjs 的新手，之前一直在常规 vuejs 中使用 vue-dragscroll 。

系统显示错误 窗口未定义 ，我查看了 vue-dragscroll 文档，但仍然找不到解决方案。

这是我实现 vue-dragscroll

<template lang="pug">
  div
    CountriesSearch.mb-2
    div#countryList(v-for="country in countries" :key="country.country" v-dragscroll)
      CountryItem(:country="country" v-if="country.Country")
</template>

<script>
import { dragscroll } from 'vue-dragscroll'

export default {
  directives: {
    dragscroll
  },

Answer 1

您必须将其声明为 plugin 文件中的指令。

// plugins/vue-dragscroll.js
import Vue from 'vue'
import { dragscroll } from 'vue-dragscroll'

Vue.directive('dragscroll', dragscroll)

然后，在您的 nuxt.config.js 中，将该插件文件添加到您的 plugins: [] 数组中：

{ src: '@/plugins/vue-dragscroll.js', ssr: false }

此指令利用了 SSR 期间不可用的 window ，因此出现错误。