图像3D页面翻转效果显示组件-flipbook-vue

图像3D页面翻转效果显示组件-flipbook-vue
插件名称 flipbook-vue
版本号 v0.10.2
发布时间 2020年5月1日
插件作者 ts1

flipbook是Vue组件,可以像书籍一样以3D页面翻转效果显示图像。

变更日志:

v0.10.2(02/19/2020)

  • 更改类名称

v0.10.1(09/29/2020)

  • 修正缩放错误

v0.9.0(09/20/2020)

  • 修复反应性

v0.8.1(04/06/2020)

  • 错误修正

安装和下载:

# Yarn
$ yarn add flipbook-vue

# NPM
$ npm install flipbook-vue --save

用法:

<template>
  <flipbook class="flipbook" :pages="['array', 'of', 'image', 'URLs']"></flipbook>
  </template>
<style>
  .flipbook {
  width: 90vw;
  height: 90vh;
  }
  </style>

如果作为模块安装,

<script>
import Flipbook from 'flipbook-vue'
export default {
components: { Flipbook }
}
</script>

Props:

pages

图片网址数组。需要。所有图像应具有相同的宽高比。
如果第一个元素是null,则下一个元素单独显示(作为封面)。
所有其他道具都是可选的。

pagesHiRes

图片网址的高分辨率版本的数组。缩放时使用它们。

flipDuration

页面翻转动画的持续时间(以毫秒为单位)。预设为1000。

zoomDuration

放大/缩小动画的持续时间(以毫秒为单位)。默认值为500。

zooms

可能的放大倍数数组。 null等效于[1](无缩放)。默认为[1, 2, 4]

ambient

环境光的强度在0到1之间。值越小,阴影越多。默认为0.4。

gloss

镜面光的强度为0到1。值越高,光泽度越高。默认值为0.6。

perspective

屏幕和查看器之间的Z轴距离(以像素为单位)。值越高,效果越差。默认为2400

nPolygons

单页被水平分割成几个矩形。更高的值可以提供更高质量的渲染,以换取性能。默认为10

singlePage

不管视口大小如何,都强制为单页模式。默认为false。

forwardDirection

阅读方向。如果您的文档是从右到左,请设置为"left"。默认值为"right"

centering

启用封面居中。默认值为true

startPage

要打开的页码(> = 1)。默认值为null

事件:

flip-left-start

当向左翻转动画开始时触发。参数是翻页前的页码。

flip-left-end

当向左翻转动画结束时触发。参数是翻转后的页码。

flip-right-start

当向右翻转动画开始时触发。参数是翻页前的页码。

flip-right-end

当向右翻转动画结束时触发。参数是翻转后的页码。

zoom-start

放大/缩小动画开始时触发。参数是缩放后的放大倍数。

zoom-end

放大/缩小动画结束时触发。参数是缩放后的放大倍数。

插槽props:

该组件将某些属性和方法公开为插槽属性。用法示例:

<flipbook :pages="pages" v-slot="flipbook">
<button @click="flipbook.flipLeft">Previous Page</button>
<button @click="flipbook.flipRight">Next Page</button>
</flipbook>

这些属性和方法也可以通过称为$refsflipbook组件。

canFlipLeft

如果可以翻到上一页,则为true。

canFlipRight

如果可以翻到下一页,则为true。

canZoomIn

如果可以放大,则为true。

canZoomOut

如果可以缩小,则为true。

page

当前页码(1至numPages)。

numPages

总页数。

flipLeft()

翻到上一页的方法。

flipRight()

转到下一页的方法。

zoomIn()

放大方法。

zoomOut()

缩小方法。