                        課程
                    
                        /前端開發(fā)
                        
                            /Vue.js
                        
                        /快速入門Web閱讀器開發(fā)

電子書可以下載但是沒能解析和渲染老師有時間可不可以幫我看看代碼

qq_夢紫菱_0

2018-08-23

源自：快速入門Web閱讀器開發(fā) 3-2

關(guān)注問題我要回答

937

操作

收起

8 回答

Sam 回答被采納 +2 積分
2018-08-23

你好，請將源碼上傳

0 回復有任何疑惑可以回復我~

收起回答

qq_夢紫菱_0 提問者

非常感謝！

2018-08-23 回復有任何疑惑可以回復我~

Sam 回復 qq_夢紫菱_0 提問者

可以將源碼整體上傳到github，如果代碼不多，可以將片段直接貼到回復中

2018-08-23 回復有任何疑惑可以回復我~

qq_夢紫菱_0 提問者回復 Sam

https://gitee.com/Angela3104/epub 老師麻煩您看下我上傳了幾個重要的文件夾因為命令行上傳有問題所以那幾個大的就沒能上傳

2018-08-23 回復有任何疑惑可以回復我~

查看3條回復

Sam
2018-08-23

另一個問題是mounted()是vue的鉤子函數(shù)，不能寫到methods里面，將mounted()移到和methods平級，就可以了（mounted()寫在methods里面會導致mounted不生效，所以在dom渲染完畢后瀏覽器不會執(zhí)行showEpub()方法）

根據(jù)你的代碼，我修改后附一份完整的代碼，你可以和你的代碼比對一下

<template>
??<div?class="ebook">
????<div?class="read-wrapper">
??????<div?id="read"></div>
????</div>
??</div>
</template>

<script>
?import?Epub?from?'epubjs'
?const?urlm?=?'/static/2018_Book_AgileProcessesInSoftwareEngine.epub'
?global.epub?=?Epub
?export?default?{
???methods:?{
?????showEpub?()?{
???????this.book?=?new?Epub(urlm)
???????this.rendition?=?this.book.renderTo('read',?{
?????????width:?window.innerWidth,
?????????height:?window.innerHeight
???????})
???????this.rendition.display()
?????}
???},
???mounted?()?{
?????this.showEpub()
???}
}
</script>

<style?lang="scss"?scoped>
?@import?'assets/styles/global';
</style>

0 回復有任何疑惑可以回復我~

收起回答

Sam
2018-08-23

你的問題是epubjs綁定的dom必須指定id，你寫成了class，因為class不唯一，所以顯示不出來

<template>
??<div?class="ebook">
????<div?class="read-wrapper">
??????<div?class="read">12345</div>
????</div>
??</div>
</template>

將

<div?class="read">12345</div>

改為

<div?id="read"></div>

0 回復有任何疑惑可以回復我~

收起回答

qq_夢紫菱_0 提問者

還有就是console.log(this.book)在調(diào)試器里也沒有像視頻里您講的那樣出現(xiàn)書的相關(guān)

2018-08-23 回復有任何疑惑可以回復我~

qq_夢紫菱_0 提問者

或者老師您有沒有整體的源碼我參考改下

2018-08-23 回復有任何疑惑可以回復我~

慕斯4868752
2019-05-30

我這邊有些電子書也解析不出來，只有老師用的官網(wǎng)的例子可以解析出來.請問是和epubjs的版本有關(guān)么

1 回復有任何疑惑可以回復我~

收起回答

慕粉1704172375
2018-10-18

放到public里面就可以了

0 回復有任何疑惑可以回復我~

收起回答

qq_夢紫菱_0 提問者
2018-08-23

這邊調(diào)試問題有關(guān)系嗎

0 回復有任何疑惑可以回復我~

收起回答

Sam

這個不會影響調(diào)試，是由于eslint對你的代碼進行靜態(tài)檢查，發(fā)現(xiàn)與預設(shè)的格式不符，要消除這些警告，將代碼調(diào)整為正確的格式即可。比如第一條key-spacing的警告，是讓你的代碼"methods:{"中："{"和":"之間加一個空格，即寫成： methods: {

2018-08-23 回復有任何疑惑可以回復我~

qq_夢紫菱_0 提問者回復 Sam

嗯嗯但是read我也改成id了還是顯示不出電子書?

2018-08-23 回復有任何疑惑可以回復我~

Sam 回復 qq_夢紫菱_0 提問者

我用你的代碼運行試試

2018-08-23 回復有任何疑惑可以回復我~