VUE D2Admin中引用turn.js 實現翻書效果
阿新 • • 發佈:2019-01-01
1.把幾個JS檔案放到路徑…\public資料夾下
2.框架的html頁面引用幾個Js(…\public\index.html)
<script src="./extras/jquery.min.1.7.js"></script> <script src="./extras/modernizr.2.5.3.min.js"></script> <script src="./extras/turn.min.js"></script> <script src="./extras/turn.html4.min.js"></script> <script src="./extras/scissor.min.js"></script>
3.所需要顯示的元件內寫程式碼
<template> <d2-container> <div class="flipbook-viewport"> <div class="container"> <div class="flipbook"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> </div> </div> </d2-container> </template> <script> export default { name: 'test', methods:{ } } function loadApp() { // Create the flipbook $('.flipbook').turn({ // Width width:922, // Height height:600, // Elevation elevation: 50, // Enable gradients gradients: true, // Auto center this flipbook autoCenter: true }); } // Load the HTML4 version if there's not CSS transform yepnope({ test : Modernizr.csstransforms, yep: ['extras/turn.js'],//引用的是public下的檔案 nope: ['extras/turn.html4.min.js'], both: ['extras/basic.css'], complete: loadApp }); </script>