Events

<template>
  <umo-office-viewer
    v-bind="options"
    @loaded="onLoaded"
    @closed="onClosed"
    @aside-changed="onAsideChanged"
    @page-changed="onPageChanged"
    @rotate-changed="onRotateChanged"
    @scale-changed="onScaleChanged"
    @fullscreen-changed="onFullscreenChanged"
    @download="onDownload"
    @export="onExport"
    @print="onPrint"
    @error="onError"
  />
</template>
 
<script setup>
import { ref } from 'vue'
import { UmoOfficeViewer } from '@umoteam/office-viewer'
 
const options = ref({
  // options
  // ...
})
 
const onLoaded = () => {
  console.log('emit:loaded', 'Document loaded')
}
const onClosed = () => {
  console.log('emit:closed', 'Close button clicked')
}
const onAsideChanged = (aside) => {
  console.log('emit:aside-changed', 'Sidebar opened / panel switched:', { aside })
}
const onPageChanged = (activePage) => {
  console.log('emit:page-changed', 'Active page changed:', { activePage })
}
const onRotateChanged = (rotate) => {
  console.log('emit:rotate-changed', 'Rotate angle changed:', { rotate })
}
const onScaleChanged = (scale) => {
  console.log('emit:scale-changed', 'Scale changed:', { scale })
}
const onFullscreenChanged = (fullscreen) => {
  console.log('emit:fullscreen-changed', 'Fullscreen toggled:', { fullscreen })
}
const onDownload = () => {
  console.log('emit:download', 'Download triggered')
}
const onPrint = () => {
  console.log('emit:print', 'Print triggered')
}
const onExport = () => {
  console.log('emit:export', 'Export triggered')
}
const onError = (error) => {
  console.log('emit:error', 'Document load error', { errMsg: error.message })
}
</script>