Parlons de la façon dont vue2.x + turn.js obtient l'effet tournant du livre

vue2.x + turn.js Comment obtenir l'effet livre tournant ? L'article suivant vous expliquera comment utiliser turn.js dans vue2.x et obtenir l'effet de retournement de livre. J'espère qu'il vous sera utile.

Vue utilisant turn.js

Aperçu de l'effet :

Code source de téléchargement du site officiel : http://turnjs.com/

Trouvez le fichier lib/turn

.

Mettez-le dans le fichier utils nouvellement créé

Turn.js est écrit en utilisant jquery Lorsque vous utilisez vue, vous devez introduire jquery

npm install --save jquery

Créez un nouveau fichier de configuration vue.config.js

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

. Je mets Le document officiel est introduit dans le fichier image local en utilisant

pour afficher les pixels du fichier Lors du réglage de la largeur et de la hauteur, la largeur est 2 fois la hauteur et reste inchangée.

Utilisation du contenu du fichier vue

<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>

Images d'effet :

【Recommandations associées : Tutoriel vue.js】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!