change: demo引入vue-router

core/package.json

@@ -30,8 +30,9 @@
     "vite": "^4.0.0",
     "vite-plugin-require-transform": "^1.0.9",
     "vite-plugin-vue2": "^2.0.3",
-    "vue-template-compiler": "2.6.14",
     "vue": "3.2.45",
+    "vue-router": "^4.1.6",
+    "vue-template-compiler": "2.6.14",
     "vue2": "npm:vue@2.6.14",
     "vue3": "npm:vue@3.2.45"
   },

core/packages/pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-office/pdf",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "",
   "main": "lib/index.js",
   "files": [

core/packages/pdf/src/main.vue

@@ -3,7 +3,7 @@ import {defineComponent, ref, onMounted, watch} from 'vue-demi';
 import {worker} from './worker';
 import {pdfjsLib} from './pdf';
 import {getUrl, loadScript} from '../../../utils/url';
-import {omit} from "lodash";
+import omit from 'lodash/omit';
 
 const pdfJsLibSrc = `data:text/javascript;base64,${pdfjsLib}`;
 const PdfJsWorkerSrc = `data:text/javascript;base64,${worker}`;

core/src/App.vue

@@ -1,27 +1,45 @@
 <script setup>
 import {ref, onMounted} from 'vue';
-import DocxDemo from './components/DocxDemo.vue';
+import {useRouter, useRoute} from 'vue-router';
-import ExcelDemo from './components/ExcelDemo.vue';
+const router = useRouter();
-import PdfDemo from './components/PdfDemo.vue';
+const route = useRoute();
+const current = ref([]);
 
-const activeKey = ref('DOCX');
 onMounted(()=>{
-
+    console.log(route.path);
+    let hash = location.hash;
+    let currentRoute = 'docx';
+    if(hash.includes('excel')){
+        currentRoute = 'excel';
+    }else if(hash.includes('pdf')){
+        currentRoute = 'pdf';
+    }
+    current.value = [currentRoute];
 });
+
+function go({key}){
+     router.push({
+         path: key,
+         query: {...route.query}
+     });
+}
 </script>
 
 <template>
-  <a-tabs v-model:activeKey="activeKey">
+  <div>
-    <a-tab-pane key="DOCX" tab="docx文件预览">
+      <a-menu v-model:selectedKeys="current" mode="horizontal" @click="go">
-      <DocxDemo />
+          <a-menu-item key="docx">
-    </a-tab-pane>
+             docx文件预览
-    <a-tab-pane key="EXCEL" tab="excel文件预览">
+          </a-menu-item>
-      <ExcelDemo />
+          <a-menu-item key="excel">
-    </a-tab-pane>
+              excel文件预览
-    <a-tab-pane key="PDF" tab="pdf文件预览">
+          </a-menu-item>
-      <PdfDemo />
+          <a-menu-item key="pdf">
-    </a-tab-pane>
+              pdf文件预览
-  </a-tabs>
+          </a-menu-item>
+      </a-menu>
+      <router-view/>
+  </div>
 
 </template>
 

core/src/common/PreviewWrapper.vue

@@ -62,7 +62,7 @@ watch(src,()=>{
 
 <style scoped>
 .preview-wrapper{
-  height: calc(100vh - 60px);
+  height: calc(100vh - 46px);
   display: flex;
   flex-direction: column;
 }

core/src/main.js

@@ -3,5 +3,8 @@ import './style.css';
 import Antd from 'ant-design-vue';
 import App from './App.vue';
 import 'ant-design-vue/dist/antd.css';
+import router from './router';
 const app = createApp(App);
-app.use(Antd).mount('#app');
+app.use(Antd);
+app.use(router);
+app.mount('#app');

core/src/router.js

@@ -0,0 +1,12 @@
+import {createRouter, createWebHashHistory} from 'vue-router';
+const routes = [
+    { path: '', redirect: '/docx' },
+    { path: '/docx', component: ()=> import('./components/DocxDemo.vue') },
+    { path: '/excel', component: ()=> import('./components/ExcelDemo.vue') },
+    { path: '/pdf', component: ()=> import('./components/PdfDemo.vue') },
+];
+
+export default createRouter({
+    history: createWebHashHistory(),
+    routes
+});

examples/dist/assets/DocxDemo-c4f58cda.css

@@ -0,0 +1 @@
+.vue-office-docx{height:100%;overflow-y:auto}.vue-office-docx .docx-wrapper>section.docx{margin-bottom:5px}@media screen and (max-width: 800px){.vue-office-docx .docx-wrapper{padding:10px}.vue-office-docx .docx-wrapper>section.docx{padding:10px!important;width:100%!important}}.operate-area[data-v-8295fbcb]{display:flex;margin:10px;align-items:center}

examples/dist/assets/PreviewWrapper-0304033e.css

@@ -0,0 +1 @@
+.preview-wrapper[data-v-6e0b6946]{height:calc(100vh - 46px);display:flex;flex-direction:column}.operate-area[data-v-6e0b6946]{display:flex;margin:10px;align-items:center;flex-wrap:wrap}

examples/dist/assets/PreviewWrapper-7e82839a.js

@@ -0,0 +1 @@
+import{r as d,p as C,_ as I,w as N,q as n,a as p,b as x,u as t,h as i,g as l,s as v,t as S,f as w,n as m,v as V,x as W,y as A,e as R}from"./index-471197f5.js";function T(e){const s=d("url"),a=d(e),r=d(e),u=d([]);function b(y){let c=new FileReader;return c.onload=o=>{let _=o.target.result;r.value=_},c.readAsArrayBuffer(y),!1}return{type:s,inputSrc:a,src:r,fileList:u,beforeUpload:b}}let g=d(!1),k;function $(e){k=C.loading(e,0),g.value=!0}function q(){g.value===!0&&(k(),g.value=!1)}const E={loading:g,showLoading:$,hideLoading:q};function F(){return location.href.includes("test")}const j=e=>(W("data-v-6e0b6946"),e=e(),A(),e),z={class:"preview-wrapper"},D={key:0,class:"operate-area"},G=j(()=>R("div",{class:"preview-wrapper-main"},null,-1)),H={__name:"PreviewWrapper",props:{accept:String,placeholder:String,defaultSrc:String},setup(e){const s=e,{type:a,inputSrc:r,src:u,fileList:b,beforeUpload:y}=T(s.defaultSrc);return N(u,()=>{E.showLoading()},{immediate:!0}),(c,o)=>{const _=n("a-radio-button"),B=n("a-radio-group"),L=n("a-input"),h=n("a-button"),U=n("upload-outlined"),P=n("a-upload");return p(),x("div",z,[t(F)()?m("",!0):(p(),x("div",D,[i(B,{value:t(a),"onUpdate:value":o[0]||(o[0]=f=>S(a)?a.value=f:null),"button-style":"solid"},{default:l(()=>[i(_,{value:"url"},{default:l(()=>[v("远程文件地址")]),_:1}),i(_,{value:"upload"},{default:l(()=>[v("上传本地文件")]),_:1})]),_:1},8,["value"]),t(a)==="url"?(p(),w(L,{key:0,value:t(r),"onUpdate:value":o[1]||(o[1]=f=>S(r)?r.value=f:null),placeholder:s.placeholder,style:{width:"600px","margin-left":"10px"}},null,8,["value","placeholder"])):m("",!0),t(a)==="url"?(p(),w(h,{key:1,type:"primary",style:{"margin-left":"10px"},onClick:o[2]||(o[2]=f=>u.value=t(r))},{default:l(()=>[v(" 预览 ")]),_:1})):m("",!0),t(a)!=="url"?(p(),w(P,{key:2,accept:s.accept,action:"",beforeUpload:t(y),"file-list":[]},{default:l(()=>[i(h,{style:{"margin-left":"10px"}},{default:l(()=>[i(U),v(" 选择文件 ")]),_:1})]),_:1},8,["accept","beforeUpload"])):m("",!0)])),V(c.$slots,"default",{src:t(u)},void 0,!0),G])}}},K=I(H,[["__scopeId","data-v-6e0b6946"]]);export{K as P,E as u};

examples/dist/assets/_commonjs-dynamic-modules-302442b1.js

@@ -0,0 +1 @@
+function r(o){throw new Error('Could not dynamically require "'+o+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.')}export{r as c};

examples/dist/assets/url-3bc6cc2f.js

@@ -0,0 +1 @@
+function r(e){return typeof e=="string"?e:e instanceof Blob?URL.createObjectURL(e):e instanceof ArrayBuffer?URL.createObjectURL(new Blob([e])):e instanceof Response?URL.createObjectURL(e.blob()):e}function i(e){return new Promise((n,o)=>{let t=document.createElement("script");t.src=e,t.onload=function(){n()},t.onerror=function(){o()},document.body.append(t)})}export{r as g,i as l};

examples/dist/index.html

@@ -7,8 +7,8 @@
           content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <title>Vite + Vue</title>
-    <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-3fbf9a6a.js"></script>
+    <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-471197f5.js"></script>
-    <link rel="stylesheet" href="/vue-office/examples/dist/assets/index-c3359691.css">
+    <link rel="stylesheet" href="/vue-office/examples/dist/assets/index-cc8fb346.css">
   </head>
   <body>
     <div id="app"></div>