You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.4 KiB
77 lines
2.4 KiB
<template>
|
|
<view class="yingbing-computed" :style="[computedStyle]">
|
|
<reader-header :text="chapter.title || ''" v-if="headerShowSync"></reader-header>
|
|
<web-view ref="webview" style="flex:1" src="/uni_modules/yingbing-ReadPage/hybrid/html/computed.html" @onPostMessage="onPostMessage"></web-view>
|
|
<reader-footer v-if="footerShowSync"></reader-footer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ReaderHeader from '../../header/header.vue'
|
|
import ReaderFooter from '../../footer/footer.vue'
|
|
export default {
|
|
inject: ['fontSize', 'fontFamily', 'lineHeight', 'topGap', 'bottomGap', 'slide', 'headerShow', 'footerShow', 'totalChapter'],
|
|
components: {
|
|
ReaderHeader,
|
|
ReaderFooter
|
|
},
|
|
computed: {
|
|
computedStyle () {
|
|
return {
|
|
'padding-top': this.topGap + 'px',
|
|
'padding-bottom': this.bottomGap + 'px',
|
|
'padding-left': this.slide + 'px',
|
|
'padding-right': this.slide + 'px'
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
chapter: {},//章节内容临时存储
|
|
success: null,//成功回调
|
|
fail: null,//失败回调,
|
|
headerShowSync: false,//展示头部
|
|
footerShowSync: false//展示底部
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
this.$refs.webview && this.$refs.webview.evalJS("destroyHandleTimer()")
|
|
},
|
|
methods: {
|
|
start ({chapter, success, fail}) {
|
|
this.chapter = chapter
|
|
this.success = success
|
|
this.fail = fail
|
|
this.headerShowSync = typeof chapter.headerShow == 'boolean' ? chapter.headerShow : this.headerShow//判断是否显示头部
|
|
this.footerShowSync = typeof chapter.footerShow == 'boolean' ? chapter.footerShow : this.footerShow//判断是否显示底部
|
|
const style = {fontSize: this.fontSize, fontFamily: this.fontFamily, lineHeight: this.lineHeight, totalChapter: this.totalChapter}
|
|
this.$nextTick(function () {
|
|
setTimeout(() => {
|
|
this.$refs.webview && this.$refs.webview.evalJS("start(" + encodeURIComponent(JSON.stringify(chapter)) + ', ' + encodeURIComponent(JSON.stringify(style)) + ")")
|
|
}, 100)
|
|
})
|
|
},
|
|
onPostMessage (e) {
|
|
e.detail.data.forEach(item => {
|
|
if ( item.handleSuccess ) {
|
|
this.success && this.success(item.handleSuccess)
|
|
this.success = null
|
|
this.fail = null
|
|
this.chapter = {}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.yingbing-computed {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
transform: translateX(-1000px);
|
|
}
|
|
</style>
|