vue禁止页面翻转_Vue组件以3D页面翻转效果显示图像

vue禁止页面翻转

翻书 (flipbook-vue)

flipbook-vue is a Vue component that displays images in 3D page flip effect.

flipbook-vue是Vue组件，可在3D页面翻转效果中显示图像。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

Install as a module.

作为模块安装。

npm i -S flipbook-vue

or

要么

yarn add flipbook-vue

Or include in html.

或包含在html中。

<script src="https://unpkg.com/flipbook-vue"></script>

用法 (Usage)

<template>
  <flipbook class="flipbook" :pages="['array', 'of', 'image', 'URLs']"></flipbook>
</template>

<style>
.flipbook .viewport {
  width: 90vw;
  height: 90vh;
}
</style>

If installed as a module,

如果作为模块安装，

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

If you would like to build from .vue directly (including CoffeeScript transpile, etc),

如果您想直接从.vue构建(包括CoffeeScript Transpile等)，

import Flipbook from 'flipbook-vue/sfc'

or

要么

import Flipbook from 'flipbook-vue/src/Flipbook.vue'

道具 (Props)

pages (pages)

Array of image URLs. Required. All images should have the same aspect ratio.

图片网址数组。 需要。 所有图像应具有相同的宽高比。

If the first element is null, the next element is displayed alone (as the cover page).

如果第一个元素为null ，则下一个元素单独显示(作为封面)。

All other props are optional.

所有其他道具都是可选的。

pagesHiRes (pagesHiRes)

Array of high resolution version of image URLs. They are used when zoomed.

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

flipDuration (flipDuration)

Duration of page flipping animation in milliseconds. Defaults to 1000.

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

zoomDuration (zoomDuration)

Duration of zoom in/out animation in milliseconds. Defaults to 500.

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

zooms (zooms)

Array of possible magnifications. Defaults to [1, 2, 4].

可能的放大倍数数组。 默认为[1, 2, 4] 。

ambient (ambient)

Intensity of ambient light in 0 to 1. Smaller value gives more shades. Defaults to 0.4.

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

gloss (gloss)

Intensity of specular light in 0 to 1. Higher value gives more gloss. Defaults to 0.6.

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

perspective (perspective)

Z-axis distance in pixel between the screen and the viewer. Higher value gives less effect. Defaults to 2400.

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

nPolygons (nPolygons)

How many rectangles a single page is horizontally splitted into. Higher value gives higher quality rendering in exchange for performance. Defaults to 10.

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

插槽道具 (Slot props)

This component exposes some properties and methods as slot properties. Example usage:

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

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

For more practical usage, refer to src/App.vue (the demo page source).

有关更多实际用法，请参考src/App.vue (演示页面源代码)。

canFlipLeft (canFlipLeft)

True if it can flip to previous page.

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

canFlipRight (canFlipRight)

True if it can flip to next page.

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

canZoomIn (canZoomIn)

True if it can zoom in.

如果可以放大，则为true。

canZoomOut (canZoomOut)

True if it can zoom out.

如果可以缩小，则为true。

flipLeft() (flipLeft())

Method to flip to previous page.

翻到上一页的方法。

flipRight() (flipRight())

Method to flip to next page.

转到下一页的方法。

zoomIn() (zoomIn())

Method to zoom in.

放大方法。

zoomOut() (zoomOut())

Method to zoom out.

缩小方法。

CSS API (CSS API)

You may need to specify the size of view port in your style sheet, directly to <flipbook> element, or to .viewport sub-element of flipbook.

您可能需要在样式表中直接指定<flipbook> .viewport <flipbook>元素或.viewport子元素的视口大小。

If the size is horizontally long, it displays two pages spread, suitable for desktop browsers. If it's vertically long, it displays single pages, suitable for smartphones.

如果尺寸水平较长，则显示两页展开，适用于桌面浏览器。 如果垂直长，则显示单页，适用于智能手机。

There are some internal classes.

有一些内部类。

.viewport (.viewport)

An <div> element that contains everything but <slot>. <slot> is placed above .viewport.

一个<div>元素，其中包含除<slot>所有内容。 <slot>放在.viewport上方。

.bounding-box (.bounding-box)

Approximate bounding box of the displayed images. Suitable to give box-shadow.

显示图像的近似边界框。 适合给box-shadow 。

浏览器支持 (Browser support)

Supports modern browsers and IE 11.

支持现代浏览器和IE 11。

翻译自: https://vuejsexamples.com/a-vue-component-that-displays-images-in-3d-page-flip-effect/

vue禁止页面翻转