vue3中使用 flipbook-vue 实现翻书效果

1. 安装 flipbook-vue

pnpm add flipbook-vue

2. 引入组件

<template>
    <Flipbook
      :pages="images"
      :click-to-zoom="false"
      :gloss="0"
      :ambient="0.5"
      :n-polygons="12"
    />
</template>

<script>
import Flipbook from 'flipbook-vue';

const images = ref(['http:xxxxx/a.png', 'http:xxxxx/b.png'])
</script>

3. 组件参数

• pages 展示图片的数组 (必传)
• click-to-zoom 是否点击放大 默认为true
• gloss 反光的亮度, 取值为0-1 默认0.6
• ambient 环境光亮度, 取值为0-1 默认0.4 (值越小阴影越大)
• n-polygons 切割矩形的个数, 个数越少折叠效果越明显, 个数多了翻页会有卡顿 默认为10

4. 修改组件大小和翻页背景色

<style>
:deep(.viewport) {
    width: 274px;
    height: 322px;
}
:deep(.polygon.blank) {
    background-color: #c92525 !important;
}
</style>

github地址: github.com/ts1/flipboo…