Rumah  >  Artikel  >  hujung hadapan web  >  Mari kita bincangkan tentang cara vue2.x turn.js mencapai kesan perubahan buku

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

青灯夜游
青灯夜游ke hadapan
2022-01-17 19:07:164758semak imbas

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.

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

Menggunakan turn.js dalam vue

Pratonton kesan:

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

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

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

Cari fail lib/turn.js

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

Letakkannya dalam fail utils yang baru dibuat

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

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

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

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

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

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:

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

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

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam