vue.compoment_Vue Compoment，用于创建电子书

最新推荐文章于 2024-06-25 08:42:55 发布

cuk5239

最新推荐文章于 2024-06-25 08:42:55 发布

阅读量345

点赞数

文章标签： vue js html javascript css ViewUI

原文链接：https://vuejsexamples.com/vue-compoment-for-create-a-e-book/

版权

vue.compoment

手册 (vue-booklet)

Vue book-like compoment for create a your own e-book

类似于Vue的书籍，可用来创建自己的电子书

Vue Booklet is a compoment which can let your create a flipable book fastly, and is responsive. As it's used css animation, it will not support IE 9 and other old browser.

Vue手册是一种工具，可以让您快速创建可翻转的书，并且React灵敏。由于它使用的是CSS动画，因此将不支持IE 9和其他旧版浏览器。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm install vue-booklet --save

要么

yarn add vue-booklet

用法 (Usage)

Import module from vue-booklet, then register it to Vue:

从vue-booklet导入模块，然后将其注册到Vue：

import booklet from 'vue-booklet';

new Vue({
  el: '#your-dom-element',
   components: {
      booklet
   }
})

And import the css file in your html file:

并在您的html文件中导入css文件：

<link rel="stylesheet" href="vue-booklet.min.css">

After that, you can use vue-booklet on your project now.

之后，您可以立即在项目中使用vue-booklet。

没有webpack (Without webpack)

<head>
  <link rel="stylesheet" href="vue-booklet.min.css">
</head>
<div id="app">
  <Book>
    <div class="page cover">
      <article class="content">
        <h1>My first book</h1>
      </article>
    </div>
    <div class="page">
      <article class="content">
        <h1>Hello World !</h1>
        <p>Using vue-booklet to create a book which can fliped.</p>
        <p>Please feel free to use it.</p>
      </article>
    </div>
  </Book>
</div>

<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="vue-booklet.min.js"></script>
<script>
var VueBooklet = window.VueBooklet;

new Vue({
  el: '#vue-booklet-container',
  components: {
    Book: VueBooklet,
  }
})
</script>

例 (Example)

<Book>
  <div class="page cover">
    <article class="content">
      <h1>My first book</h1>
    </article>
  </div>
  <div class="page">
    <article class="content">
      <h1>Hello World !</h1>
      <p>Using vue-booklet to create a book which can fliped.</p>
      <p>Please feel free to use it.</p>
    </article>
  </div>
</Book>

方法 (Methods)

prevPage()，nextPage() (prevPage(), nextPage())

Function for control the book without button.

无需按钮即可控制书籍的功能。

this.$refs.book.nextPage();
this.$refs.book.prevPage();

movePage(pageNum) (movePage(pageNum))

Function for allow user move to specify page.

允许用户移动以指定页面的功能。

const pageNumber = '1';
this.$refs.book.movePage(pageNumber);

道具 (Props)

displayPageNumber(可选) (displayPageNumber(optional))

Default value is true. Will not show page number when it is false.

默认值为true。如果为假，将不显示页码。

enableControl(可选) (enableControl(optional))

Default value is true. Will not allow user control the book when it is false. If you want to control it, add ref to book compoment and call function like this:

默认值为true。书籍为假时，将不允许用户控制。如果要控制它，请将ref添加到书本成分中并调用函数，如下所示：

this.$refs.book.nextPage();
this.$refs.book.prevPage();

displayButton(可选) (displayButton(optional))

Default value is true. Will not show nextPage and PrevPage button when it is false. Only work when the value of allowFlip is true.

默认值为true。如果为false，则不会显示nextPage和PrevPage按钮。仅在allowFlip的值为true时有效。

enableSelectPage(可选) (enableSelectPage(optional))

Default value is true. Will not allow user select page when it is false. Only work when the value of allowFlip is true.

默认值为true。错误的页面将不允许用户选择页面。仅在allowFlip的值为true时有效。

langcode(可选) (langcode(optional))

Set the language of booklet UI. Current support language is English (en), Traditional Chinese (zh-hant) and Simplified Chinese (zh-hans). You can add new langcode with translation props. Default value is en.

设置小册子用户界面的语言。当前的支持语言是英语(en)，繁体中文(zh-hant)和简体中文(zh-hans)。您可以添加带有翻译道具的新语言代码。默认值为en。

翻译(可选) (translation(optional))

Define translation of booklet UI. You can pass object or JSON string with translated text to it. Default value:

定义小册子UI的翻译。您可以将带有已翻译文本的对象或JSON字符串传递给它。默认值：

{
  'en': {
    'selectPage': 'Select page',
    'pages': 'Pages',
    'prev': 'Prev',
    'next': 'Next',
  },
  'zh-hant': {
    'selectPage': '跳至指定頁數',
    'pages': '頁數',
    'prev': '上一頁',
    'next': '下一頁',
  },
  'zh-hans': {
    'selectPage': '跳至指定页数',
    'pages': '页数',
    'prev': '上一页',
    'next': '下一页',
  },
}

pageTransitionTime(可选) (pageTransitionTime (optional))

Set the transition time of each book page.

设置每个书页的过渡时间。

Default value is 0.8s.

预设值为0.8s。

onOpened(book，position)(可选) (onOpened(book, position) (optional))

A callback which happens after book opened. Pass the book dom which you can control it, and position of book.

书打开后发生的回调。通过您可以控制的书籍dom和书籍的位置。

onClosed(书，位置)(可选) (onClosed(book, position) (optional))

A callback which happens after book closed. Pass the book dom which you can control it, and position of book.

书关闭后发生的回调。通过您可以控制的书籍dom和书籍的位置。

onFlipStart(currentPage，direction)(可选) (onFlipStart(currentPage, direction) (optional))

A callback which happens before a page filped. Pass the page dom which you can control it, and direction for you to know filped to next page or previous page.

在页面整理之前发生的回调。传递您可以控制的页面dom，并告知您前进到下一页或上一页的方向。

onFlipEnd(currentPage，direction)(可选) (onFlipEnd(currentPage, direction) (optional))

A callback which happens after a page filped. Pass the page dom which you can control it, and direction for you to know filped to next page or previous page.

页面整理后发生的回调。传递您可以控制的页面dom，并告知您前进到下一页或上一页的方向。

发展 (Developing)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

翻译自: https://vuejsexamples.com/vue-compoment-for-create-a-e-book/

vue.compoment

cuk5239

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.compoment_Vue Compoment，用于创建电子书

vue.compoment 手册 (vue-booklet)Vue book-like compoment for create a your own e-book 类似于Vue的书籍，可用来创建自己的电子书 Vue Booklet is a compoment which can let your create a flipable book fastly, and is responsi...
复制链接

扫一扫