VUE D2Admin中引用turn.js 实现翻书效果

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>