怎么用vue2.x+turn.js实现翻书效果(turn.js,vue,编程语言)

vue中使用turn.js

官方网站下载源码：http://turnjs.com/

找到里面的文件 lib/turn.js

放到新建的utils文件里面

Turn.js是使用了jquery书写的，使用vue中要引入jquery

npminstall--savejquery

新建vue.config.js配置文件

constwebpack=require('webpack')module.exports={chainWebpack:config=>{//引入ProvidePluginconfig.plugin("provide").use(webpack.ProvidePlugin,[{$:"jquery",jquery:"jquery",jQuery:"jquery","window.jQuery":"jquery",},]);},}

我把官方文件引入到本地图片文件使用

查看文件的像素，在设置宽高的时候width是2倍 height不变。

使用vue文件内容

<template><div><div><divid="flipbook"><divv-for="(item)inimgUrl":key="item.index":style="`background:url(${item.imgurl})no-repeat100%100%`"></div></div></div></div></template><script>//turn.jsimportturnfrom'../utils/turn.js'exportdefault{name:'Home',data(){return{imgUrl:[{imgurl:'image/1.jpg',index:1},{imgurl:'image/2.jpg',index:2},{imgurl:'image/3.jpg',index:3},{imgurl:'image/4.jpg',index:4},{imgurl:'image/5.jpg',index:5},{imgurl:'image/6.jpg',index:6},{imgurl:'image/7.jpg',index:7},{imgurl:'image/8.jpg',index:8},{imgurl:'image/9.jpg',index:9},{imgurl:'image/10.jpg',index:10},{imgurl:'image/11.jpg',index:11},{imgurl:'image/12.jpg',index:12},]}},methods:{onTurn(){this.$nextTick(()=>{$("#flipbook").turn({autoCenter:true,height:646,width:996,});})}},mounted(){this.onTurn();}}</script><style>*{margin:0;padding:0;}.home{width:100vw;height:100vh;.turnClass{display:flex;margin:0pxauto;width:996px;height:646px;padding:calc((100vh-646px)/2)0;overflow:hidden;}}</style>