在公司基于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>