转换为图片

package-lock.json

@@ -11,7 +11,8 @@
         "core-js": "^3.8.3",
         "jquery": "^3.7.1",
         "vue": "^3.2.13",
-        "vue-router": "^4.5.0"
+        "vue-router": "^4.5.0",
+        "vue3-flipbook": "^1.0.4"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -11381,6 +11382,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue3-flipbook": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/vue3-flipbook/-/vue3-flipbook-1.0.4.tgz",
+      "integrity": "sha512-H44vAvIFbqBWRf3haBMcpkC24ZstmGHZD5AqHOtrdET6ra3IMghBOfEqQfXbDq3xPp4N8gkNfML08q6wGL4tYQ==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/storybook",
+        "packages/Flipbook"
+      ]
+    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.2.tgz",

package.json

@@ -11,7 +11,8 @@
     "core-js": "^3.8.3",
     "jquery": "^3.7.1",
     "vue": "^3.2.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "vue3-flipbook": "^1.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -1,14 +1,17 @@
 <template>
   <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
   <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
-  <router-view></router-view>
+  <!-- <router-view></router-view> -->
+   <FirstPage />
   <!-- <MenuList /> -->
 </template>
 
 <script>
+import { useRouter } from 'vue-router';
 // import HelloWorld from './components/HelloWorld.vue'
 // import coffeeIndex from './components/coffeeIndex.vue';
 // import MenuList from './components/MenuList.vue';
+import FirstPage from './components/FirstPage.vue';
 
 export default {
   name: 'App',
@@ -16,6 +19,16 @@ export default {
     // HelloWorld,
     // coffeeIndex
     // MenuList
+    FirstPage
+  },
+  setup() {
+    const goTo = () => {
+      console.log('go to first page');
+      useRouter().push('/first');
+    }
+    return {
+      goTo
+    }
   }
 }
 </script>
@@ -40,5 +53,7 @@ body {
   background-color: #f5f5f5;
   height: 100%;
   width: 100%;
+  overflow: hidden;
+
 }
 </style>

src/components/FirstPage.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="index">
+        <div id="page">
+            <img src="../assets/page1.png" alt="" class="pic">
+            <!-- <img src="../assets/page1-1.png" alt="" class="pic">
+        <img src="../assets/page1-2.png" alt="" class="pic"> -->
+            <!-- <img src="../assets/page2-1.jpg" alt="" class="pic">
+        <img src="../assets/page2-2.jpg" alt="" class="pic"> -->
+            <img src="../assets/page2.jpg" alt="" class="pic">
+        </div>
+        <div class="nextPage" v-on:click="clickHandle()"></div>
+        <div class="nextPageIn"></div>
+        <div class="nextPageOut"></div>
+    </div>
+
+</template>
+<script>
+import { ref, nextTick, onMounted } from 'vue'
+import turn from '../utils/turn.js'
+import $ from 'jquery'
+export default {
+    components: {},
+    setup() {
+
+        const imgList = ref([
+            { url: '../assets/page1-1.png' },
+            { url: '../assets/page1-2.png' },
+            { url: '../assets/page2-1.png' },
+            { url: '../assets/page2-2.png' },
+        ])
+        onMounted(() => {
+            document.querySelector('.nextPageIn').addEventListener('touchstart', () => {
+                console.log('touchstart')
+
+            })
+            document.querySelector('.nextPageOut').addEventListener('mouseup', () => {
+                console.log('mouseup')
+                alert('mouseup')   
+            })
+            onTurn()
+        })
+        const onTurn = () => {
+            nextTick(() => {
+                $('#page').turn({
+                    autoCenter: true,
+                    height: 900, //高度
+                    width: 1500, //宽度
+                    display: 'single', //单页显示/双页显示  single/double
+                    elevation: 50,
+                    duration: 1000, //翻页速度(毫秒), 默认600ms
+                    gradients: true, //翻页时的阴影渐变, 默认true
+                    // autoCenter: true, //自动居中, 默认false
+                    acceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为true
+                    page: 1, //设置当前显示第几页
+                    pages: 2, //总页数
+                    turnCorners: 'bl,br',
+                    when: {
+                        //监听事件
+                        turning: function (e, page, view) {
+                            console.log(e, page, view)
+                            // 翻页前触发
+                        },
+                        turned: function (e, page) {
+                            console.log(e, page)
+                            // 翻页后触发
+                        },
+                        start: function (e, pageObj) {
+                            console.log(e, pageObj)
+                            // 开始翻页时触发
+                            // $('#page').turn("next")
+                        }
+                    },
+                })
+            })
+
+        }
+        const clickHandle = () => {
+            console.log('onclick')
+        }
+
+        return {
+            clickHandle,
+            imgList,
+            onTurn
+        }
+    }
+}
+
+</script>
+<style>
+.index {
+    width: 1500px;
+    height: 900px;
+    overflow: hidden;
+}
+
+.nextPage {
+    width: 50px;
+    height: 100%;
+    background-color: red;
+    position: absolute;
+    top: 0px;
+    right: 50%;
+    z-index: 99;
+}
+
+#page {
+
+    width: 100%;
+    height: 100%;
+    /* background-image: url(../assets/page1.png); */
+}
+
+.nextPageIn {
+    width: 44%;
+    height: 50%;
+    background-color: red;
+    position: absolute;
+    top: 80%;
+    left: 70%;
+    /* z-index: 5; */
+}
+
+.nextPageOut {
+    width: 44%;
+    height: 50%;
+    background-color: rgb(0, 4, 255);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 5;
+}
+
+.pic {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/router/index.js

@@ -3,6 +3,7 @@
 import { createWebHashHistory , createRouter } from 'vue-router'
 import coffeeIndex from '@/components/coffeeIndex.vue'
 import HelloWorld from '@/components/HelloWorld.vue'
+import FirstPage from '@/components/FirstPage.vue'
 // import MenuItem from '@/view/MenuItem.vue'
 
 const router = createRouter({
@@ -14,6 +15,7 @@ const router = createRouter({
         },
         { path: '/coffee', component: coffeeIndex },
         { path: '/hello', component: HelloWorld },
+        { path: '/first', component: FirstPage },
     ]
 })
 export default router

src/utils/turn.js

@@ -16,8 +16,9 @@
  * benefit and not for any commercial purpose or for monetary gain.
  * 
  **/
+import jQuery from "jquery";
 
-(function($) {
+export default (function($) {
 
 'use strict';
 

vue.config.js

@@ -2,6 +2,7 @@ const { defineConfig } = require('@vue/cli-service')
 const webpack = require('webpack');
 
 module.exports = defineConfig({
+  publicPath:'./',
   transpileDependencies: true,
   lintOnSave : false,
   configureWebpack: {