如何在 Nuxt 中拥有像 turn.js 这样的翻书？

Posted 2023-02-16

【中文标题】如何在 Nuxt 中拥有像 turn.js 这样的翻书？

【英文标题】：How to have a flipbook like turn.js in Nuxt?

【发布时间】：2021-12-20 15:34:39

【问题描述】：

如何将 turn.js 导入 nuxt.js 项目。当我通过插件使用时，错误窗口未定义，即使我在客户端模式下使用它

更新

：我使用必需的包检查是客户端，但我得到错误

jquery__WEBPACK_IMPORTED_MODULE_3___default(...)(...).turn is not a function

<template>
    <div id="flipbook">
        <div class="hard">
            Turn.js
        </div>
        <div class="hard" />
        <div> Page 1 </div>
        <div> Page 2 </div>
        <div> Page 3 </div>
        <div> Page 4 </div>
        <div class="hard" />
        <div class="hard" />
    </div>
</template>

<script>
    import $ from 'jquery';

    if (process.client) 
        require('turn.js');
    

    export default 
        mounted() 
            console.log($('#flipbook').turn('page'));
            $('#flipbook'.turn(
                width: 400,
                height: 300,
                autoCenter: true,
            ));
        ,

    ;
</script>

【问题讨论】：

嗨，到目前为止，您尝试了什么？你能分享一些代码吗？ How to Ask

为什么 jQuery 进入 Nuxt ？ Nuxt 就是 Vue.js，难道 Vue.js 不能满足 jQuery 可以解决的需求吗？

@BillalBegueradj 确实如此。它可能只是某些插件所需要的，例如 turn.js

【参考方案1】：

EDIT + TLDR：使用flipbook-vue，因为它确实在任何方面都更好（重量、维护、灵活性、不依赖 jQuery 等...）。 这与 Nuxt 作为shown here 一起工作也非常好。

---

如果你需要将 jQuery 安装到你的 Nuxt 项目中（我这样做不推荐），你可以关注my answer here。尽管如此，IMO 将非常感谢没有 jQuery 的替代方案，如果您仅将其用于选择 DOM 中的元素，则更是如此。值 20kb 吗？

如果您想定位组件中可用的特定元素，请使用$refs 语法，如other answer 中所述。而不是通常的 querySelector。

require 是基于节点的，您应该使用import，因为您在使用 Vue 时处于基于现代浏览器的生态系统中。因此，使用 dynamic import 在本地导入您的包仍然是最好的方法。

TLDR：这样的东西通常足以让它工作

<template>
  <div id="flipbook" ref="flipbook">
    <div class="hard">
      Turn.js
    </div>
    <div class="hard" />
    <div> Page 1 </div>
    <div> Page 2 </div>
    <div> Page 3 </div>
    <div> Page 4 </div>
    <div class="hard" />
    <div class="hard" />
  </div>
</template>

<script>
export default 
  async mounted () 
    if (process.client) 
      const turnJs = await import('turn.js')
      this.$refs.flipbook.turnJs.turn(
        width: 400,
        height: 300,
        autoCenter: true,
      )
    
  

</script>

同时，这个项目已经有 10 年没有更新了，所以我想你可以把这个传下去。

用一点 CSS + JS 编写自己的代码也是完全可行的，并且将提供最好的 IMO 结果。

【讨论】：

我有一个问题。什么是``` this.flipbook.turnJs.turn( width: 400, height: 300, autoCenter: true, ) ```

@Stone0409 抱歉，正如您猜到的那样，这里缺少$refs。

我试过了，但是有错误（Cannot read properties of undefined (reading 'turn')）:((

@Stone0409 是的，我不确定它可能使用的确切语法，因为它不是上面写的维护包。 import 语法可能不受支持。 turnJs 里面有什么东西吗？

哦，是的，turnJs 里面什么都没有 :((((