|
@@ -2,7 +2,7 @@
|
|
|
<div class="vue-pdf" @scroll="onScroll" ref="myDiv">
|
|
|
<vue-pdf-embed :source="testpdf1" ref="vuePdfRef" :style="scaleFun" class="vue-pdf-cs" @loaded="onPdfLoaded" :renderPageNumber="true" />
|
|
|
</div>
|
|
|
- <div class="page-tool">
|
|
|
+ <div class="page-tool" v-show="isToolVisible">
|
|
|
<div class="page-tool-item" @click="lastPage">上一页</div>
|
|
|
<div class="page-tool-item" @click="nextPage">下一页</div>
|
|
|
<div class="page-tool-item" @click="pageZoomOut">放大</div>
|
|
@@ -10,15 +10,17 @@
|
|
|
<div class="page-tool-item" @click="PDFPrint">打印</div>
|
|
|
<div class="page-tool-item" @click="PDFDownload">下载</div>
|
|
|
</div>
|
|
|
- <div class="page-tool2">
|
|
|
- <div class="page-tool-item" @click="lastPage">{{scaleData.pageNum}}/{{scaleData.numPages}}</div>
|
|
|
+ <div class="page-tool2" v-show="isToolVisible">
|
|
|
+ <div class="page-tool-item2" @click="lastPage">{{scaleData.pageNum}}/{{scaleData.numPages}}</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup lang="ts">
|
|
|
+<script setup lang="ts" v-show="isToolVisible">
|
|
|
import VuePdfEmbed from 'vue-pdf-embed';
|
|
|
import testpdf1 from '../../assets/testpdf.pdf';
|
|
|
import {computed, onMounted, reactive, ref} from "vue";
|
|
|
+const isToolVisible = ref(false)
|
|
|
+
|
|
|
// 实现pdf缩放
|
|
|
const scaleFun = computed(() => {
|
|
|
return {
|
|
@@ -103,6 +105,11 @@ const onScroll = () => {
|
|
|
scaleData.pageNum = currentPage;
|
|
|
};
|
|
|
|
|
|
+onMounted(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ isToolVisible.value = true;
|
|
|
+ }, 1000);
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
@@ -140,12 +147,24 @@ const onScroll = () => {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+.page-tool-item2 {
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px 0px;
|
|
|
+ width: 60px;
|
|
|
+ cursor: pointer;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
.vue-pdf{
|
|
|
margin: 0px auto;
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
overflow: auto;
|
|
|
background: #e3e2e2;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
.vue-pdf-cs{
|