vue引入turn.js

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相关推荐

vue引入第三方js的方案报错
vue引入第三方js的方案报错< 问题描述 vue项目中引用一个外部js包 npm中没有响应的js下载所以只能通过外部引用使用方法如下: 1.首先是第三方js包存放的位置一定要放在 st ...
php引入外部js,vue.js怎么引入外部js,vue引入第三方js库
vue.js怎么引入外部js·怎么介绍外部js,在vue.js中引入外部js的方法如下:1.使用外部文件[config.js],代码为[函数格式XML(text){ return text }]:2. ...
vue引入外部js文件（第三方js工具或者jq库）
方法一:静态资源导入(或者cdn资源加载) 在public文件夹下的index.html文件使用script标签对插件进行引用. 可以是项目中的静态资源,也可以是远程资源. 例如: //本地静态资源, ...
Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图
目录 1.引入包三个包 2.在vue 组件内 import文件 3.在mound钩子函数内调用 4.效果图部分加载报错另:HTML页面使用three加载obj文件和mtl文件 1.引入包三个包 n ...
vue引入静态js文件
由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在st ...
Vue引入第三方js库
情况一:无法通过npm install安装包引入方法一:在index.html中引用script 直接在index.html中引用script,任何时候皆可用!! 注意:第三方js必须放在stati ...
VUE 引入第三方js包及调用
1.首先是第三方js包存放的位置一定要放在 static 目录下否则引用不到 2.网上查找到的引用第三方包的四种方式实测部分第三方js包没法使用,较稳定的方式是在 index.html 中引入js ...
html中如何引入vue,vue.js怎样引入到HTML中,vue引入第三方js库
vue.js怎样引入到HTML中如何将vue.js引入HTML,把vue.js引入HTML的方法:一.下载vue . js:然后在HTML中添加vue.js包,其语法为"script src ...
vue引入TweenMax.js
今天在看vue文档关于动画那部分,发现有个数字渐增动画用了TweenMax动画库. 文档里面是直接引入的CDN静态文件. 我想用npm 引入,于是上网查了一下,是可以的: //先安装 npm inst ...

vue引入turn.js

（1）首先要全局引入jquery

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

（3）使用方式

（4）参数说明

（5）效果展示

（6）代码展示

vue引入turn.js相关推荐

最新文章

热门文章

vue引入turn.js

（1） 首先要全局引入jquery

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

（3）使用方式

（4）参数说明

（5）效果展示

（6）代码展示

vue引入turn.js相关推荐

最新文章

热门文章

（1）首先要全局引入jquery

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