vue+turn.js翻书效果

npm下安装turn.js会带来一些问题，建议直接下在turn.js包引用
嵌入不同的组件示例

<div class="book-wrapper">
      <div id="fill-book">
        <div
          class="manual-page"
          v-for="(item, index) in componentList"
          :key="index"
        >
          <component
            :is="item.name"
            :key="item.pageId"
            :id="item.pageId"
          ></component>
        </div>
      </div>
    </div>

import turn from "@/utils/turn.min";

// 引入不同页的组件后注册
components: {
    firstLeft,
    firstRight,
    secLeft,
    secRight,
    menuBlank, // 封面占位页
  },

 // 设置不同组件list
 this.componentList = [
        {
          name: "menuBlank",
          pageId: 0,
        },
        {
          name: "firstLeft",
          pageId: 1,
        },
        {
          name: "firstRight",
          pageId: 2,
        },
        {
          name: "secLeft",
          pageId: 3,
        },
        {
          name: "secRight",
          pageId: 4,
        },
      ];

mounted() {
    $("#fill-book").turn("center");
    $("#fill-book").turn("page");
    this.$nextTick(() => {
      $("#fill-book")
        .turn({
          display: "double",
          elevation: 50,
          duration: 100,
          gradients: true,
          duration: 500,
          // autoCenter: true,
          // acceleration: true,
          page: 2,
          width: 1176,
          height: 728,
          when: {
            turning: function (event, page) {
              page === 1 && event.preventDefault();   // 禁止第1页时翻页
            },
            turned: function () {
              //当前页
              console.log("Current view: ", $(this).turn("view"));
              //总页数
              console.log(
                "#fill-book has " + $("#fill-book").turn("pages") + " pages"
              );
              // $("#fill-book").turn("hasPage", 10);
              // $("#fill-book").turn("pages", 5);
            },
          },
        })
        .bind("start", function (event, pageObject, corner) {
          if (pageObject.page === 2) {
            event.preventDefault();  // 禁止第1页时翻页
          }
        });
    });
  },

methods: {
    toPage(item) {
      $("#fill-book").turn("page", item.pageId); // 点击前往目标页
    },
}