<template> <div ref="pdfContainer"> <PdfApp style="height: 90vh" :page-number="pageNumber" theme="dark" pdf="https://wnh9zs.csb.app/sample.pdf" @pages-rendered="pagesRendered"> </PdfApp> </div> </template> <script lang="ts" setup> import { ref, watch } from 'vue'; import PdfApp from "vue3-pdf-app"; import "vue3-pdf-app/dist/icons/main.css"; const pdfContainer = ref(null); const pageNumber = ref(1); function pagesRendered(pdfApp) { console.log(pdfApp); setTimeout(() => (pdfApp.pdfViewer.currentScaleValue = "page-height")); } </script> 如何监听pageNumber的变化

2023-07-10by@1193813053-U2Ugb&@ChatGPT.Model: gpt-3.5

1193813053-U2Ugb

const pdfContainer = ref(null);
const pageNumber = ref(1);

function pagesRendered(pdfApp) {
console.log(pdfApp);
setTimeout(() => (pdfApp.pdfViewer.currentScaleValue = "page-height"));
}

</script> 如何监听pageNumber的变化

你可以使用watch函数来监听pageNumber的变化。在<script>标签中添加以下代码：

watch(pageNumber, (newPageNumber) => {
    console.log('pageNumber changed:', newPageNumber);
    // 在这里可以执行你想要的操作
});

这样，当pageNumber的值发生变化时，会触发回调函数，并打印出新的pageNumber值。你可以在回调函数中执行你想要的操作，例如更新页面内容或发送网络请求。

1193813053-U2Ugb

vue3 代码如何监听pafAPP的滚动条 <template>
<div ref="pdfContainer">
<button @click="logPageNumber">获取当前页数</button>
<PdfApp style="height: 90vh" theme="dark" pdf="https://wnh9zs.csb.app/sample.pdf">
</PdfApp>
</div>
</template>

const pdfContainer = ref(null);

function logPageNumber() {
let res = JSON.parse(window.localStorage.getItem("pdfjs.history"));
alert(res.files[0]['page']);
}

</script>

要监听PdfApp的滚动条，你可以使用onScroll事件来捕获滚动事件。在<script>标签中添加以下代码：

import { ref, onMounted } from 'vue';

const pdfContainer = ref(null);

onMounted(() => {
    const container = pdfContainer.value.$el;
    container.addEventListener('scroll', handleScroll);
});

function handleScroll(event) {
    const scrollTop = event.target.scrollTop;
    console.log('Scroll top:', scrollTop);
    // 在这里可以执行你想要的操作
}

在上述代码中，我们使用onMounted钩子函数来确保PdfApp已经被挂载到DOM中后再进行监听。然后，我们获取PdfApp的容器元素，并添加滚动事件监听器handleScroll。在handleScroll函数中，我们可以获取滚动条的位置scrollTop，并在控制台打印出来。你可以在handleScroll函数中执行你想要的操作，例如更新页面内容或发送网络请求。

1193813053-U2Ugb

但是container 是unfinded

抱歉，我之前给出的代码有误。在Vue 3中，使用ref创建的引用是一个响应式对象，它的值可以通过.value访问。请尝试以下修改：

import { ref, onMounted } from 'vue';

const pdfContainer = ref(null);

onMounted(() => {
    const container = pdfContainer.value;
    container.$el.addEventListener('scroll', handleScroll);
});

function handleScroll(event) {
    const scrollTop = event.target.scrollTop;
    console.log('Scroll top:', scrollTop);
    // 在这里可以执行你想要的操作
}

现在，pdfContainer.value可以正确地获取到PdfApp组件的实例，然后通过.el访问其DOM元素。在onMounted钩子函数中，我们将滚动事件监听器handleScroll添加到PdfApp容器的DOM元素上。在handleScroll函数中，我们可以获取滚动条的位置scrollTop并进行操作。

1193813053-U2Ugb

const pdfContainer = ref(null);

onMounted(() => {
//
});

function pagesRendered(pdfApp) {
const container = document.querySelector('#viewerContainer');
container.addEventListener('scroll', handleScroll);
setTimeout(() => (pdfApp.pdfViewer.currentScaleValue = "page-height"));
}

function handleScroll(event) {
const scrollTop = event.target.scrollTop;
console.log('Scroll top:', scrollTop);
// 在这里可以执行你想要的操作
}

</script> 在上面代码中如何判断container 是否已经到达底部

要判断容器是否已经到达底部，你可以使用以下代码：

function handleScroll(event) {
    const container = event.target;
    const scrollTop = container.scrollTop;
    const scrollHeight = container.scrollHeight;
    const clientHeight = container.clientHeight;
    
    if (scrollTop + clientHeight >= scrollHeight) {
        console.log('Reached bottom of container');
        // 在这里可以执行你想要的操作
    }
}

在handleScroll函数中，我们获取容器的滚动位置scrollTop、滚动内容的总高度scrollHeight以及容器的可见高度clientHeight。通过比较scrollTop + clientHeight是否大于等于scrollHeight，我们可以判断容器是否已经到达底部。如果到达底部，则打印出相应的消息，并执行你想要的操作。

OpenPrompt