Usando este SFC en Vue 3, no he podido hacer que el panel de desplazamiento permanezca desplazado hacia abajo a medida que se expande la matriz de eventos. Me pregunto si tendré que reemplazar esto con mi propio componente personalizado porque parece que puedes hacerlo fácilmente con un div. Pero me gustaría apegarme a los componentes de PrimeVue si es posible.
<template> <Card style="width: 20em; height: 570px" class="card p-tabview-panels"> <template #subtitle> Event Log </template> <template #content> <ScrollPanel ref="scrollPanel" style="width: 100%; height: 500px"> <div v-for="(e, i) in events" :key="i" class="event" :class="e.type"> {{ e.message }} </div> </ScrollPanel> </template> </Card> </template> <script setup> import ScrollPanel from "primevue/scrollpanel"; import Card from "primevue/card"; import { defineProps, onUpdated, ref } from "vue"; defineProps({ events: Array }); const scrollPanel = ref(null); onUpdated(() => { console.log(scrollPanel.value); // these seem to be undefined scrollPanel.value.scrollTop = scrollPanel.value.scrollHeight; }); </script>Saltarse la documentación y mirar el código de ScrollPanel directamente.
Podemos ver que ScrollPanel toma algunos accesorios diferentes, que están configurados como nulos de forma predeterminada. Si entiendo el código correctamente, el accesorio que desea es scrollYRatio , ya que controla qué tan lejos se ha movido en la página. Prueba algo como:
<ScrollPanel ref="scrollPanel" scrollYRatio={0.99} style="width: 100%; height: 500px">