Let's talk about how vue2.x + turn.js achieves the book turning effect-Vue.js-php.cn

Let's talk about how vue2.x + turn.js achieves the book turning effect

青灯夜游

Release： 2022-01-17 19:07:16

forward

4761 people have browsed it

vue2.x turn.js How to achieve the book turning effect? The following article will introduce to you how to use turn.js in vue2.x and achieve the book flipping effect. I hope it will be helpful to you.

Let's talk about how vue2.x + turn.js achieves the book turning effect

Using turn.js in vue

Preview of the effect:

Lets talk about how vue2.x + turn.js achieves the book turning effect

Official website download source code: http://turnjs.com/

Lets talk about how vue2.x + turn.js achieves the book turning effect

Find the file lib/turn.js

Lets talk about how vue2.x + turn.js achieves the book turning effect

Put it in the newly created utils file

Lets talk about how vue2.x + turn.js achieves the book turning effect

Turn.js is written using jquery. When using vue, jquery must be introduced

npm install --save jquery

Copy after login

Create new vue.config.js configuration file

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

Copy after login

I introduced the official file into the local image file and used

Lets talk about how vue2.x + turn.js achieves the book turning effect

to view the pixels of the file when setting the width and height. width is 2 times height unchanged.

Lets talk about how vue2.x + turn.js achieves the book turning effect

Use vue file content

<template>
  <div>
    <div>
      <div id="flipbook">
          <div v-for="(item) in imgUrl" :key="item.index"
          :style="`
          background:url(${item.imgurl}) no-repeat 100% 100%
          
          `"
          >
          </div>
      </div>
    </div>
  </div>


</template>

<script>
//turn.js
import turn from &#39;../utils/turn.js&#39;

export default {
  name: &#39;Home&#39;,
  data(){
    return{
        imgUrl:[
          {imgurl:&#39;image/1.jpg&#39;,index:1},
          {imgurl:&#39;image/2.jpg&#39;,index:2},
          {imgurl:&#39;image/3.jpg&#39;,index:3},
          {imgurl:&#39;image/4.jpg&#39;,index:4},
          {imgurl:&#39;image/5.jpg&#39;,index:5},
          {imgurl:&#39;image/6.jpg&#39;,index:6},
          {imgurl:&#39;image/7.jpg&#39;,index:7},
          {imgurl:&#39;image/8.jpg&#39;,index:8},
          {imgurl:&#39;image/9.jpg&#39;,index:9},
          {imgurl:&#39;image/10.jpg&#39;,index:10},
          {imgurl:&#39;image/11.jpg&#39;,index:11},
          {imgurl:&#39;image/12.jpg&#39;,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: 0px auto;
      width: 996px;
      height: 646px;
      padding: calc((100vh - 646px)/2) 0;
      overflow: hidden;
    }
  }
</style>

Copy after login

Effect picture:

Lets talk about how vue2.x + turn.js achieves the book turning effect

[Related recommendations:vue.js tutorial】

The above is the detailed content of Let's talk about how vue2.x + turn.js achieves the book turning effect. For more information, please follow other related articles on the PHP Chinese website!