90 lines
1.5 KiB
Vue
Executable File
90 lines
1.5 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<div class="row m-3 bg-white">
|
|
<div class="col-6 m-0 p-0">
|
|
<img @click="nav_left" :class="leftclass()" :src="left">
|
|
</div>
|
|
<div class="col-6 m-0 p-0">
|
|
<img @click="nav_right" :class="rightclass()" :src="right">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue/dist/vue.esm-bundler';
|
|
|
|
export default {
|
|
props: {
|
|
rev: ref(""),
|
|
pages: ref(0)
|
|
},
|
|
|
|
setup(props, emit) {
|
|
return {
|
|
left: ref(""),
|
|
right: ref(""),
|
|
leftpage : ref(0),
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
init() {
|
|
this.leftpage = 0;
|
|
this.update();
|
|
this.$watch('rev', this.show);
|
|
},
|
|
|
|
update() {
|
|
this.left = "/page/" + this.rev + "/" + this.leftpage + "/page.jpg";
|
|
this.right = "/page/" + this.rev + "/" + (this.leftpage + 1) + "/page.jpg";
|
|
},
|
|
|
|
leftclass() {
|
|
if (this.leftpage > 0) {
|
|
return 'page-left w-100 m-0 p-0';
|
|
} else {
|
|
return 'page-end w-100 m-0 p-0';
|
|
}
|
|
},
|
|
|
|
rightclass() {
|
|
if ((this.leftpage + 1) >= this.pages) {
|
|
return "invisible w-100 m-0 p-0";
|
|
}
|
|
if (this.leftpage < this.pages - 2) {
|
|
return 'page-right w-100 m-0 p-0';
|
|
} else {
|
|
return 'page-end w-100 m-0 p-0';
|
|
}
|
|
},
|
|
|
|
show() {
|
|
this.left = '';
|
|
this.right = '';
|
|
this.leftpage = 0;
|
|
this.update();
|
|
},
|
|
|
|
nav_right() {
|
|
if (this.leftpage < this.pages - 2) {
|
|
this.leftpage += 2;
|
|
}
|
|
this.update();
|
|
},
|
|
|
|
nav_left() {
|
|
this.leftpage -= 2;
|
|
if (this.leftpage < 0) {
|
|
this.leftpage = 0;
|
|
}
|
|
this.update();
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.init();
|
|
}
|
|
}
|
|
</script>
|