在 Nuxt中 使用 vue-seamless-scroll 遇到的问题

Admin
Admin
Admin
52
文章
6
评论
2020年5月15日09:51:12 评论 1,398 1244字阅读4分8秒

之前在其他项目中用过一个无缝滚动的组件 vue-seamless-scroll 感觉还可以,然后打算在 Nuxt 项目中继续使用,但是该组件的作者表示暂不支持 Nuxt ,但实际上我们可以通过添加 <client-only> 标签来解决这个问题,组件的演示地址

一、安装 vue-seamless-scroll

  1. npm install vue-seamless-scroll --save

二、修改配置

plugins 目录中新建 seamless-scroll.js 文件:

  1. import Vue from 'vue';
  2. import SeamlessScroll from 'vue-seamless-scroll';
  3. Vue.use(SeamlessScroll);

修改 nuxt.config.js 配置:

  1. plugins: [
  2.     { src: '@/plugins/element-ui', ssr: true },
  3.     { src: '@/plugins/seamless-scroll', ssr: false } // ssr: false
  4. ]

ssr: false 为 true 的话,会报 Windows is not defined 错误。

重启服务后,发现控制台报错:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

翻译过来就是:

[Vue警告]:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由不正确的HTML标记引起的,例如在其中嵌套块级元素或丢失。Bailing水化和执行完整的客户端渲染。

三、解决方案

vue-seamless-scroll 外层添加 client-only 标签,告诉服务器仅在客户端渲染。

  1. <client-only>
  2.     <vue-seamless-scroll :data="listData" class="seamless-warp">
  3.         <ul class="item">
  4.             <li v-for="item in listData">
  5.                 <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
  6.             </li>
  7.         </ul>
  8.     </vue-seamless-scroll>
  9. </client-only>

时间是一个好东西,记录的是学习的证据

继续阅读
Admin
  • 本文由 发表于 2020年5月15日09:51:12
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属...
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想...
Vue-Router + Webpack 路由懒加载实现 前端开发

Vue-Router + Webpack 路由懒加载实现

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。结合 Vue 的异步组件...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: