Mari kita bincangkan tentang cara vue2.x turn.js mencapai kesan perubahan buku

Bagaimana untuk mencapai kesan pusingan buku dalam vue2.x turn.js? Artikel berikut akan memperkenalkan kepada anda cara menggunakan turn.js dalam vue2.x dan mencapai kesan membalikkan buku saya harap ia akan membantu anda.

Menggunakan turn.js dalam vue

Pratonton kesan:

Kod sumber muat turun tapak web rasmi: http://turnjs.com/

Cari fail lib/turn.js

Letakkannya dalam fail utils yang baru dibuat

Turn.js ditulis menggunakan jquery, anda perlu memperkenalkan jquery

npm install --save jquery

Buat fail konfigurasi vue.config.js baharu

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

Saya memperkenalkan fail rasmi ke dalam fail imej tempatan menggunakan

untuk melihat piksel fail, dalam tetapan Apabila lebar dan ketinggian ditukar, lebar adalah 2 kali tinggi dan kekal tidak berubah.

Gunakan kandungan fail 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>

Gambar kesan:

[Cadangan berkaitan: tutorial vue.js】

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara vue2.x turn.js mencapai kesan perubahan buku. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!