Vue开发Web阅读器（一）

本项目使用vue3

初始化项目后需配置vue.config.js，官方文档：https://cli.vuejs.org/zh/config/#vue-config-js

我的暂时配置：

const path = require('path')function resolve (dir) {return path.join(__dirname, dir)
}module.exports = {chainWebpack: (config) => {config.resolve.alias.set('src', resolve('src')).set('styles', resolve('src/assets/styles')).set('components', resolve('src/components'))},devServer: {host: '0.0.0.0',port: 8080},publicPath: './'
}

安装sass依赖和阅读器引擎

npm i node-sass sass-loader --save-devnpm i epubjs --save

将项目所需的字体图标放入assets下的styles文件夹，将icon.css导入main.js中

import 'styles/icon.css'

index.html中配置手机访问时不能缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

rem配置

在App.vue中配置，当DOM内容加载时设置字体大小为屏幕宽度的1/10，当字体大小大于50px时，还是50px

<script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'app',components: {HelloWorld}
}document.addEventListener('DOMContentLoaded', () => {let html = document.querySelector('html')let fontSize = window.innerWidth / 10fontSize = fontSize > 50 ? 50 : fontSizehtml.style.fontSize = fontSize + 'px'
})
</script>

reset.scss和全局样式global.scss配置

访问https://meyerweb.com/eric/tools/css/reset/复制到styles/reset.scss中

还要加入html和body的默认设置

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}body {line-height: 1;
}ol, ul {list-style: none;
}blockquote, q {quotes: none;
}blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}table {border-collapse: collapse;border-spacing: 0;
}html, body {width: 100%;height: 100%;font-family: 'PingFangSC-Light', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', 'Arial', 'sans-serif';
}

配置global.scss

@import "reset.scss";// 1rem = fontSize px
// 1px = 1/fontSize rem$fontSize: 37.5;
@function px2rem($px) {@return ($px / $fontSize) + rem
}@mixin center() {display: flex;justify-content: center;align-items: center;
}

然后在main.js中引入global.scss

通过epubjs将epub电子书解析成Book对象，再通过Book对象生成Rendition对象

在src目录下新建Ebook.vue，router.js中配置路由和重定向，当访问主页面时重定向到/ebook页面

import Vue from 'vue'
import Router from 'vue-router'import Ebook from '@/Ebook'Vue.use(Router)export default new Router({routes: [{path: '/',redirect: '/ebook'},{path: '/ebook',component: Ebook}]
})

Ebook.vue中写入

<template><div>aaa</div>
</template><script>
import Epub from 'epubjs'const DOWNLOAD_URL = '/static/2018_Book_AgileProcessesInSoftwareEngine.epub'
export default {methods: {// 电子书解析和渲染showEpub () {// 生成Ebook// 生成Rendition,通过Book.renderTo方法生成// 通过Rendition.display渲染电子书}},mounted () {this.showEpub()}
}
</script>

<template><div class="ebook"><div class="read-wrapper"><div id="read"></div></div></div>
</template><script>
import Epub from 'epubjs'const DOWNLOAD_URL = '/2018_Book_AgileProcessesInSoftwareEngine.epub'
global.ePub = Epub
export default {methods: {// 电子书解析和渲染showEpub () {// 生成Ebookthis.book = new Epub(DOWNLOAD_URL)// 生成Rendition,通过Book.renderTo方法生成this.rendition = this.book.renderTo('read', {width: window.innerWidth,height: window.innerHeight})// 通过Rendition.display渲染电子书this.rendition.display()}},mounted () {this.showEpub()}
}
</script>

设置遮罩，点击左边或右边遮罩来控制翻页

<template><div class="ebook"><div class="read-wrapper"><div id="read" class="read"></div><div class="mask"><div class="left" @click="prevPage"></div><div class="center"></div><div class="right" @click="nextPage"></div></div></div></div>
</template><script>
import Epub from 'epubjs'const DOWNLOAD_URL = '/2018_Book_AgileProcessesInSoftwareEngine.epub'
global.ePub = Epub
export default {methods: {// 电子书解析和渲染showEpub () {// 生成Ebookthis.book = new Epub(DOWNLOAD_URL)// 生成Rendition,通过Book.renderTo方法生成this.rendition = this.book.renderTo('read', {width: window.innerWidth,height: window.innerHeight})// 通过Rendition.display渲染电子书this.rendition.display()},prevPage () {if (this.rendition) {this.rendition.prev()}},nextPage () {if (this.rendition) {this.rendition.next()}}},mounted () {this.showEpub()}
}
</script><style lang="scss" scoped>@import "~styles/global";.ebook {position: relative;.read-wrapper {.read {/*width: 500px;*//*margin: 0 auto;*/}.mask {display: flex;position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 100;.left {width: 100px;}.right {width: 100px;}.center {flex: 1;}}}}
</style>

添加菜单，添加点击中心处显示和隐藏菜单事件

<template><div class="ebook"><transition name="slide-down"><div v-show="isMenuShow" class="title-wrapper"><div class="left"><span class="icon-back icon"></span></div><div class="right"><div class="icon-wrapper"><span class="icon-cart icon"></span></div><div class="icon-wrapper"><span class="icon-person icon"></span></div><div class="icon-wrapper"><span class="icon-more icon"></span></div></div></div></transition><div class="read-wrapper"><div id="read" class="read"></div><div class="mask"><div class="left" @click="prevPage"></div><div class="center" @click="toggle"></div><div class="right" @click="nextPage"></div></div></div><transition name="slide-up"><div v-show="isMenuShow" class="menu-wrapper"><div class="icon-wrapper"><span class="icon-menu icon"></span></div><div class="icon-wrapper"><span class="icon-progress icon"></span></div><div class="icon-wrapper"><span class="icon-bright icon"></span></div><div class="icon-wrapper"><span class="icon-a icon">A</span></div></div></transition></div>
</template><script>
import Epub from 'epubjs'const DOWNLOAD_URL = '/2018_Book_AgileProcessesInSoftwareEngine.epub'
global.ePub = Epub
export default {data () {return {isMenuShow: false}},methods: {// 电子书解析和渲染showEpub () {// 生成Ebookthis.book = new Epub(DOWNLOAD_URL)// 生成Rendition,通过Book.renderTo方法生成this.rendition = this.book.renderTo('read', {width: window.innerWidth,height: window.innerHeight})// 通过Rendition.display渲染电子书this.rendition.display()},prevPage () {if (this.rendition) {this.rendition.prev()}},nextPage () {if (this.rendition) {this.rendition.next()}},toggle () {this.isMenuShow = !this.isMenuShow}},mounted () {this.showEpub()}
}
</script><style lang="scss" scoped>@import "~styles/global";.ebook {position: relative;overflow-y: hidden;.title-wrapper {display: flex;justify-content: space-between;align-items: center;position: absolute;top: 0;left: 0;width: 100%;height: px2rem(48);z-index: 101;background-color: #fff;box-shadow: 0 px2rem(8) px2rem(8) rgba(0, 0, 0, 0.15);&.slide-down-enter, &.slide-down-leave-to {transform: translate3d(0, -100%, 0);}&.slide-down-enter-to, &.slide-down-leave {transform: translate3d(0, 0, 0);}&.slide-down-enter-active, &.slide-down-leave-active {transition: all .3s linear;}.left {flex: 0 0 px2rem(60);@include center;}.right {flex: 1;display: flex;justify-content: flex-end;.icon-wrapper {flex: 0 0 px2rem(40);@include center;}}}.read-wrapper {.read {}.mask {display: flex;position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 100;.left {width: px2rem(100)}.right {width: px2rem(100)}.center {flex: 1;}}}.menu-wrapper {display: flex;position: absolute;z-index: 101;left: 0;bottom: 0;width: 100%;height: px2rem(48);box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, 0.15);background-color: #fff;.icon-wrapper {flex: 1;@include center}}}
</style>

动画效果解析

      &.slide-down-enter, &.slide-down-leave-to {transform: translate3d(0, -100%, 0);}&.slide-down-enter-to, &.slide-down-leave {transform: translate3d(0, 0, 0);}&.slide-down-enter-active, &.slide-down-leave-active {transition: all .3s linear;}

transition包裹在需要展示动画的标签外部，但动画的样式和包裹的标签属于同一级，所以要使用&表示和标签同一级

slide-down-enter表示开始显示时

slide-down-leave-to表示完全隐藏时

slide-down-enter-to表示完全显示时

slide-down-leave表示开始隐藏时

slide-down-enter-active表示显示的全过程

slide-down-leave-active表示隐藏的全过程

2个动画的方式差不多可以简写，而且以后可能还会用到，所以写入global.scss中

.slide-down-enter, .slide-down-leave-to {transform: translate3d(0, -100%, 0);
}.slide-up-enter, .slide-up-leave-to {transform: translate3d(0, 100%, 0);
}.slide-down-enter-to, .slide-down-leave,.slide-up-enter-to,.slide-up-leave{transform: translate3d(0, 0, 0);
}.slide-down-enter-active, .slide-down-leave-active, .slide-up-enter-active, .slide-up-leave-active {transition: all .3s linear;
}

Vue开发Web阅读器（一）相关推荐

Web阅读器开发系列教程（入门篇）
作者:Sam 前言最近我在慕课网发布了两门关于Web阅读应用开发的课程,采用Vue全家桶开发.免费课是入门级课程,初步实现了一个阅读器.实战课是进阶课程,实现了一个高性能的互联网阅读应用.两个项目都 ...
双语web阅读器+书城设计与实现
背景: 前段日子心血来潮,突然想做个小说阅读器,带翻译功能的. 原因大概来之已久了,主要是我本人是一个超级大书虫,特别喜欢看网络小说.经典小说.名著.心理学等"有意思"的书. 从接 ...
❤️一文掌握HTML+CSS+JS开发小说阅读器❤️
上周<让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果>博文中说到这周出一篇介绍小说阅读器开发的博文,可能是离职不上班的原因,在家变得也懒散了一些,本来是打算上周三时候动手 ...
Flex 开发PDF阅读器【转】
FLEX开发PDF阅读器,将PDF转化为SWF 2009-08-23 13:35 下载:http://down.52z.com/zz/SWFTools_en.rar(搜狗搜索) http://www. ...
使用 PDFkit 开发PDF阅读器（ iOS 开发 / swift ）
使用 PDFkit 开发PDF阅读器(iOS 开发) 使用swift开发结尾有百度网盘源码注意:这里的 Class 要手敲 PDFView,如果在创建 Outlet 的时候再改会出错主要注意可选 ...
快速入门Web阅读器开发
知识点: 阅读器工作原理 ePub 和 mobi ePub(Electronic Publication) 电子出版物 mobi 是 Amazon Kindle 的电子书格式开发流程当前Node版 ...
商业级web阅读器项目（上）
1.技术难点分析阅读器开发: 分页算法.全文搜索算法.引入web字体.主题设计离线存储机制设计:LocalStorage+IndexDB 实现各种复杂手势+交互动画,如何兼容手势+鼠标操作利用v ...
Android开发RSS阅读器
RSS阅读器的Logo: RSS阅读器是一种软件或是说一个程序,这种软件可以自由读取RSS和Atom两种规范格式的文档,且这种读取RSS和Atom文档的软件有多个版本,由不同的人或公司开发,有着不同的 ...
NVIDIA 7th SkyHackathon（八）使用 Flask 与 Vue 开发 Web
1.页面效果 Web 采用 flask+vue 开发,效果图如下 2.后端 import sys import subprocess import os from PIL import Image f ...

Vue开发Web阅读器（一）

Vue开发Web阅读器（一）相关推荐

最新文章

热门文章