Vue 中使用 Turn.js 实现书籍翻页效果

首先先看下我实现的效果： 地址： 123vwu.com/

使用turn.js 实现了一个答案之书的翻书动画效果。

安装依赖

首先，确保您的项目中已经安装了 jQuery 和 Turn.js。可以使用npm或yarn进行安装：

npm install jquery turn.js --save

或者

yarn add jquery turn.js

创建书籍翻页组件

接下来，我们将创建一个基于 el-dialog（我使用的 Element Plus 组件库）的书籍翻页组件。该组件将允许用户通过点击书籍封面的右上角来翻阅页面，并且可以在翻页时显示随机答案。

组件模板

<el-dialog v-model="visible" :show-close="false" width="710px" modal-class="turn-dialog" @open="onTurn" destroy-on-close :z-index="100000">
  <template #header="{ close, titleId, titleClass }">
    <div class="my-header">
      <h4 :id="titleId" :class="titleClass">书籍📚右上角翻开</h4>
      <el-button type="danger" @click="close">
        <el-icon class="el-icon--left">
          <CircleCloseFilled />
        </el-icon>
        Close
      </el-button>
    </div>
  </template>
  <el-row class="w-150px mb-2">
    <el-text>
      1. 闭上眼睛，默念你的问题 5-10秒。例如：“他喜欢我吗？”“我是否要换一个新的工作？”<br />
      2. 想象你问题的同时，在你感觉 时间正确的时候，用鼠标点击书的封面<strong>右上角</strong>翻页。<br />
      3. 你的答案将很快呈现在你的眼前。<br />
      4. 遇到任何问题，你都可以翻开它，请相信相信的力量!
    </el-text>
  </el-row>
  <div class="turn-container">
    <div class="turn-banner">
      <div class="turn-content">
        <div id="flipbook">
          <img v-for="(item, index) in imgList" :key="index" fit="fill" :src="getImageSrc('test', item.url)" alt="">
          <div class="overlay">
            <div class="text" v-for="(answerItem, index) in currentAnswer" :key="index">{{ answerItem }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</el-dialog>

脚本部分

import { ref, nextTick } from 'vue';
import $ from 'jquery';
import 'turn.js';

export default {
  setup() {
    const visible = ref(false);
    const imgList = ref([
      // 图片列表
    ]);
    const currentAnswer = ref([]);
    const AnswerList = [
      // 答案列表
    ];

    const getImageSrc = (prefix, url) => `${prefix}/${url}`;

    const onTurn = () => {
      if (AnswerList.length > 0) {
        const randomIndex = Math.floor(Math.random() * AnswerList.length);
        currentAnswer.value = AnswerList[randomIndex]; // 更新当前答案
      }
      nextTick(() => {
        $('#flipbook').turn({
          autoCenter: true,
          height: 428, // 高度
          width: 684, // 宽度
          display: 'double', // 单页显示/双页显示  single/double
          elevation: 50,
          duration: 500, // 翻页速度(毫秒), 默认600ms
          gradients: true, // 翻页时的阴影渐变, 默认true
          acceleration: true, // 硬件加速, 默认true, 如果是触摸设备设置为true
          page: 1, // 设置当前显示第几页
          pages: imgList.value.length, // 总页数
          when: {
            // 监听事件
            // turning: function (e, page, view) {
            //   console.log(e, page, view)
            //   // 翻页前触发
            // },
            // turned: function (e, page) {
            //   console.log(e, page)
            //   // 翻页后触发
            // },
          },
        });
      });
    };

    return {
      visible,
      imgList,
      currentAnswer,
      onTurn,
      getImageSrc,
    };
  },
};

样式

为了使翻页效果更加美观，我们还需要添加一些CSS样式：

.turn-container {
  position: relative;
  overflow: hidden;
}

.turn-banner {
  background-color: #f5f5f5;
  padding: 10px;
  border: 1px solid #ccc;
}

.turn-content {
  position: relative;
  z-index: 1;
}

#flipbook {
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  color: white;
}

结语

以上就是如何在Vue项目中使用 Turn.js 创建书籍翻页效果的完整指南。可以通过这个示例，您可以根据自己的需求调整图片列表、答案列表以及相关样式，以适应不同的应用场景。