47 lines
1.0 KiB
Vue
47 lines
1.0 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
|
|
import { useVbenDrawer } from '@vben/common-ui';
|
|
|
|
import VueOfficePptx from '@vue-office/pptx';
|
|
|
|
// import '@vue-office/pptx/lib/index.css';
|
|
|
|
const url = ref('');
|
|
const pptx = ref('/static/43b7da46a6ca47e5a9d7710d8dcf499c.pptx');
|
|
const pptStyle = ref({
|
|
height: 'calc(100vh - 100px)',
|
|
width: '100%',
|
|
margin: 'auto',
|
|
});
|
|
const renderedHandler = () => {
|
|
console.warn('渲染完成');
|
|
};
|
|
const errorHandler = (err) => {
|
|
console.error(`渲染失败:${err}`);
|
|
};
|
|
const [Drawer, drawerApi] = useVbenDrawer({
|
|
onCancel() {
|
|
drawerApi.close();
|
|
},
|
|
onClosed() {
|
|
drawerApi.setState({ overlayBlur: 0, placement: 'right' });
|
|
},
|
|
onOpenChange(isOpen: boolean) {
|
|
if (isOpen) {
|
|
url.value = drawerApi.getData<Record<string, any>>();
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
<template>
|
|
<Drawer title="文档预览" :footer="false">
|
|
<VueOfficePptx
|
|
:src="pptx"
|
|
:style="pptStyle"
|
|
@rendered="renderedHandler"
|
|
@error="errorHandler"
|
|
/>
|
|
</Drawer>
|
|
</template>
|