yaclty/vue-office
1
0
Fork 0
mirror of https://github.com/501351981/vue-office.git synced 2025-07-25 07:41:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

change: 完善demo

Browse Source
This commit is contained in:
liyulin 2023-02-12 15:49:59 +08:00
parent e4d7d55b14
commit 641ca2d720
9 changed files with 174 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/dist/assets/index-ccd7d5af.css → examples/dist/assets/index-1db1ccb4.css vendored
View File

File diff suppressed because one or more lines are too long

96
examples/dist/assets/index-26846323.js → examples/dist/assets/index-6ca9763a.js vendored
View File

File diff suppressed because one or more lines are too long

4
examples/dist/index.html vendored
View File

@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/vue-office/examples/dist/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vue-office/examples/dist/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>Vite + Vue</title>
<script type="module" crossorigin src="/vue-office/examples/dist/assets/index-26846323.js"></script> <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-6ca9763a.js"></script>
<link rel="stylesheet" href="/vue-office/examples/dist/assets/index-ccd7d5af.css"> <link rel="stylesheet" href="/vue-office/examples/dist/assets/index-1db1ccb4.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

BIN
examples/dist/static/wx.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

61
examples/src/common/PreviewWrapper.vue Normal file
View File

@ -0,0 +1,61 @@
<script setup>
import {defineProps} from 'vue'
import usePreview from '../hooks/usePreview.js'
const props = defineProps({
accept: String,
placeholder: String,
defaultSrc: String
})
const {type, inputSrc, src, fileList, beforeUpload} = usePreview(props.defaultSrc)
</script>
<template>
<div>
<div class="operate-area">
<a-radio-group v-model:value="type" button-style="solid">
<a-radio-button value="url">远程文件地址</a-radio-button>
<a-radio-button value="upload">上传本地文件</a-radio-button>
</a-radio-group>
<a-input
v-if="type==='url'"
v-model:value="inputSrc"
:placeholder="props.placeholder"
style="width: 600px; margin-left:10px;"
/>
<a-button
v-if="type==='url'"
type="primary"
style="margin-left: 10px"
@click="src=inputSrc"
>
预览
</a-button>
<a-upload
v-if="type !== 'url'"
:accept="props.accept"
action=""
:beforeUpload="beforeUpload"
:file-list="[]"
>
<a-button style="margin-left: 10px">
<upload-outlined></upload-outlined>
选择文件
</a-button>
</a-upload>
</div>
<slot :src="src"></slot>
</div>
</template>
<style scoped>
.operate-area {
display: flex;
margin: 10px;
align-items: center;
}
</style>

19
examples/src/components/DocxDemo.vue
View File

@ -1,12 +1,27 @@
<script setup> <script setup>
import VueOfficeDocx from '../../../packages/docx/index' import VueOfficeDocx from '../../../packages/docx/index'
import PreviewWrapper from '../common/PreviewWrapper.vue'
</script> </script>
<template> <template>
<VueOfficeDocx src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx"/> <PreviewWrapper
accept=".docx"
placeholder="请输入docx文件地址"
default-src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx"
>
<template v-slot="slotProps">
<VueOfficeDocx :src="slotProps.src"/>
</template>
</PreviewWrapper>
</template> </template>
<style scoped> <style scoped>
.operate-area {
display: flex;
margin: 10px;
align-items: center;
}
</style> </style>

12
examples/src/components/ExcelDemo.vue
View File

@ -1,11 +1,21 @@
<script setup> <script setup>
import VueOfficeExcel from '../../../packages/excel/index' import VueOfficeExcel from '../../../packages/excel/index'
import '../../../packages/excel/src/index.css' import '../../../packages/excel/src/index.css'
import PreviewWrapper from '../common/PreviewWrapper.vue'
</script> </script>
<template> <template>
<VueOfficeExcel src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx"/> <PreviewWrapper
accept=".xlsx"
placeholder="请输入xlsx文件地址"
default-src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx"
>
<template v-slot="slotProps">
<VueOfficeExcel :src="slotProps.src"/>
</template>
</PreviewWrapper>
</template> </template>
<style scoped> <style scoped>

12
examples/src/components/PdfDemo.vue
View File

@ -1,10 +1,18 @@
<script setup> <script setup>
import VueOfficePdf from '../../../packages/pdf/index' import VueOfficePdf from '../../../packages/pdf/index'
import PreviewWrapper from '../common/PreviewWrapper.vue'
</script> </script>
<template> <template>
<VueOfficePdf src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf"/> <PreviewWrapper
accept=".pdf"
placeholder="请输入pdf文件地址"
default-src="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf"
>
<template v-slot="slotProps">
<VueOfficePdf :src="slotProps.src"/>
</template>
</PreviewWrapper>
</template> </template>
<style scoped> <style scoped>

24
examples/src/hooks/usePreview.js Normal file
View File

@ -0,0 +1,24 @@
import {ref} from 'vue'
export default function (defaultSrc){
const type = ref('url')
const inputSrc = ref(defaultSrc)
const src = ref(defaultSrc)
const fileList = ref([])
function beforeUpload(file){
let reader = new FileReader();
reader.onload = (loadEvent) => {
let arrayBuffer = loadEvent.target.result;
src.value = arrayBuffer
};
reader.readAsArrayBuffer(file);
return false
}
return {
type,
inputSrc,
src,
fileList,
beforeUpload
}
}