github地址：
https://github.com/blasten/turn.js

（1） 首先要全局引入jquery

這里我們使用vue-cli3 搭建的項目，所以使用鏈式引入

vue.config.js文件

chainWebpack: (config) => {if (process.env.NODE_ENV === "production") {//引入ProvidePluginconfig.plugin("provide").use(webpack.ProvidePlugin, [{$: "jquery",jquery: "jquery",jQuery: "jquery","window.jQuery": "jquery",},]);}},

---

（2） 首先要全局引入turn.js

下載turn.js 到本地，然后引入頁面，例如：

import turn from "../../../turn/lib/turn";

如果通過npm安裝，引入，會發現，一直報錯~

npm i turn-js

---

（3）使用方式

---

（4）參數說明

地址： http://www.turnjs.com/#

---

（5）效果展示

---

（6）代碼展示

<template><div class="body-content"><div id="magazine"><div v-for="(item, index) in allPages" :key="`test_${index}`"><div :class="`text${item.page}`"><footerv-if="item.page - 1 !== 0 && item.page - 1 !== allPages.length - 1"class="current-page"><div v-if="(item.page - 1) % 2 == 0" class="even-numbers">{{ item.page - 1 }}</div><div v-else class="odd-number">{{ item.page - 1 }}</div></footer></div></div></div></div> </template> <script> import turn from "../../../turn/lib/turn";export default {name: "FenMian2",data() {return {value: "",page: 1,allPages: [{page: 1,name: "aa"},{page: 2,name: "aa"},{page: 3,name: "aa"},{page: 4,name: "aa"},{page: 5,name: "aa"},{page: 6,name: "aa"}]};},mounted() {let self = this;$("#magazine").turn("center");$("#magazine").turn("page");this.$nextTick(() => {$("#magazine").turn({display: "double",elevation: 50,duration: 100,gradients: true,autoCenter: true,acceleration: true,gradients: !$.isTouch,page: self.page,width: 1152,when: {turned: function(e, page, pages) {//當前頁console.log("Current view: ", $(this).turn("view"));//總頁數console.log("#magazine has " + $("#magazine").turn("pages") + " pages");// $("#magazine").turn("hasPage", 10);// $("#magazine").turn("pages", 5);}}});});},methods: {},components: {} }; </script> <style lang="scss" scoped> body {background: #ccc; }#magazine {width: 1152px;height: 752px;.text1 {background: url("../../../turn/pages/01.jpg") no-repeat;background-size: 100% 100%;width: 100%;height: 752px;}.text2 {background: url("../../../turn/pages/02.jpg") no-repeat;background-size: 100% 100%;width: 100%;height: 752px;}.text3 {background: url("../../../turn/pages/03.jpg") no-repeat;background-size: 100% 100%;width: 100%;height: 752px;}.text4 {background: url("../../../turn/pages/04.jpg") no-repeat;background-size: 100% 100%;width: 100%;height: 752px;}.text5 {background: url("../../../turn/pages/05.jpg") no-repeat;background-size: 100% 100%;width: 100%;height: 752px;}.text6 {background: url("../../../turn/pages/06.jpg") no-repeat;background-size: 100% 100%;width: 100%;height: 752px;}.current-page {position: absolute;bottom: 0;width: 100%;text-align: center;font-size: 14px;.even-numbers {width: 30px;height: 30px;background: #ffcc66;color: #fff;right: 0;position: absolute;bottom: 0px;line-height: 30px;text-align: center;}.odd-number {position: absolute;bottom: 0px;width: 30px;height: 30px;background: #cc00ff;color: #fff;line-height: 30px;text-align: center;}} }#magazine .shadow, #magazine.shadow {-webkit-box-shadow: 0 4px 10px #666;-moz-box-shadow: 0 4px 10px #666;-ms-box-shadow: 0 4px 10px #666;-o-box-shadow: 0 4px 10px #666;box-shadow: 0 4px 10px #666; }#magazine .turn-page {background-color: #ccc;background-size: 100% 100%; } .bookmark {margin-left: 633px;font-size: 20px;writing-mode: tb-rl;display: flex;align-items: center;justify-content: center;text-align: center;padding-top: 47px;.item:nth-child(2n) {background: #ccc;width: 45px;height: 150px;}.item {width: 45px;height: 160px;background: red;}.item:nth-child(1) {z-index: 4;text-shadow: 6px 6px 6px #999;}.item:nth-child(2) {z-index: 3;text-shadow: 6px 6px 6px #333;}.item:nth-child(3) {z-index: 2;text-shadow: 6px 6px 6px #333;}.item:nth-child(4) {z-index: 1;text-shadow: 6px 6px 6px #333;} } </style>

總結

以上是生活随笔為你收集整理的vue引入turn.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。