事件列表

<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({
  // 配置项
  // ...
});
 
const onLoaded = () => {
  console.log('emit:loaded', '文档加载完成')
}
const onClosed = () => {
  console.log('emit:closed', '点击了关闭按钮')
}
const onAsideChanged = (aside: 'info' | 'thumbs') => {
  console.log('emit:aside-changed', '开启侧边栏并切换面板:', { aside })
}
const onPageChanged = (activePage: number) => {
  console.log('emit:page-changed', '当前页码变化:', { activePage })
}
const onRotateChanged = (rotate: number) => {
  console.log('emit:rotate-changed', '旋转角度发生变化:', { rotate })
}
const onScaleChanged = (scale: number) => {
  console.log('emit:scale-changed', '缩放比例变化:', {scale})
}
const onFullscreenChanged = (fullscreen: boolean) => {
  console.log('emit:fullscreen-changed', '全屏状态发生变化:',  { fullscreen })
}
const onDownload = () => {
  console.log('emit:download', '下载文档')
}
const onPrint = () => {
  console.log('emit:print', '打印文档')
}
const onExport = () => {
  console.log('emit:export', '导出文档')
}
const onError = (error) => {
  console.log('emit:error', '文档加载出错', { errMsg: error.message })
}
</script>