Kven
97593b7dc1
-调整 PPT 预览和工作视图组件的布局和样式 - 优化蜘蛛预览和工作视图组件的加载逻辑 - 更新 Word 预览组件的加载逻辑 - 移除不必要的样式和结构，提高组件性能
64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<script lang="ts" setup>
|
||
import { ref } from 'vue';
|
||
|
||
import { useVbenDrawer } from '@vben/common-ui';
|
||
|
||
import VueOfficePptx from '@vue-office/pptx';
|
||
import { message } from 'ant-design-vue';
|
||
|
||
// import '@vue-office/pptx/lib/index.css';
|
||
// http://47.112.173.8:6802/static/66f3cfd95e364a239d8036390db658ae.pptx
|
||
// const url = ref('');
|
||
const isLoading = ref(false); // 新增：加载状态变量
|
||
const pptx = ref('/pptx/66f3cfd95e364a239d8036390db658ae.pptx');
|
||
const pptStyle = ref({
|
||
height: 'calc(100vh - 100px)',
|
||
width: '100%',
|
||
margin: 'auto',
|
||
background: '#ffffff',
|
||
});
|
||
const renderedHandler = () => {
|
||
isLoading.value = false; // 文档渲染完成，关闭加载状态
|
||
message.success('渲染完成');
|
||
};
|
||
const errorHandler = () => {
|
||
isLoading.value = false; // 出错时也关闭加载状态
|
||
message.error('渲染失败');
|
||
};
|
||
const [Drawer, drawerApi] = useVbenDrawer({
|
||
onCancel() {
|
||
drawerApi.close();
|
||
},
|
||
onClosed() {
|
||
drawerApi.setState({ overlayBlur: 0, placement: 'right' });
|
||
},
|
||
onOpenChange(isOpen: boolean) {
|
||
if (isOpen) {
|
||
const data = drawerApi.getData<Record<string, any>>();
|
||
if (data) {
|
||
isLoading.value = true; // 开始加载文档，开启加载状态
|
||
pptx.value = `/pptx/${data}`; // 更新 pptx 的值
|
||
}
|
||
// url.value = drawerApi.getData<Record<string, any>>();
|
||
}
|
||
},
|
||
});
|
||
</script>
|
||
<template>
|
||
<Drawer class="w-[880px]" title="文档预览" :footer="false">
|
||
<div v-if="isLoading" class="loading-overlay">正在加载文档，请稍候...</div>
|
||
<VueOfficePptx
|
||
:src="pptx"
|
||
:style="pptStyle"
|
||
@rendered="renderedHandler"
|
||
@error="errorHandler"
|
||
/>
|
||
</Drawer>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.pptx-preview-wrapper {
|
||
background: #fff;
|
||
}
|
||
</style>
|