在 Nuxt中使用滚动组件 vue-seamless-scroll

在公司基于Nuxt项目中需要使用滚动组件，刷新之后会报错window is not defined

1. 安装 vue-seamless-scroll

npm install vue-seamless-scroll --save

2. 更改配置文件

报错 window is not defined，是由于nuxt是基于服务器渲染的框架，服务器渲染时没有wiindow定义的。
VUE报错：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由不正确的HTML标记引起的，例如在其中嵌套块级元素或丢失。

在 plugins 目录中新建 vue-seamless-scroll.js 文件：

import Vue from 'vue'
import SeamlessScroll from 'vue-seamless-scroll'

Vue.use(SeamlessScroll)

在nuxt.config.js修改配置项

  plugins: [
    '@/plugins/element-ui',
    '@/plugins/axios',
    { src: '@/plugins/vue-seamless-scroll', ssr: false },
  ]

3.在文件中使用

<vue-seamless-scroll :data="runningData" :class-option="scrollOption"  class="scroll-container">
  <div class="flex-row" v-for="item in runningData" :key="item.id">
    <span class="row-1 row-nomal">{{ item.mbShowName }}</span>
    <span class="row-2 row-nomal">{{ item.mbShowVal }}</span>
    <span class="row-3 row-nomal">{{ item.updateTime | dateFilter }}</span>
  </div>
</vue-seamless-scroll>

标签：vue,seamless,item,报错,plugins,scroll
来源： https://blog.csdn.net/weixin_44769310/article/details/116144924