pdf-viewer-vue3 - npm Package Compare versions

Comparing version 0.1.50 to 0.1.51

package.json

 {
   "name": "pdf-viewer-vue3",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "private": false,
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -22,2 +22,4 @@ # pdf-viewer-vue3
 - 移动端
+- 深色、浅色主题
+- 自定义主题(变量文档待更新)
 
@@ -33,2 +35,4 @@ ## usage
 const pdfComp = ref();
+const pdfMobileComp = ref();
+const theme = ref("light");
 async function handleFileChange(event) {
@@ -38,8 +42,8 @@ const files = event.target.files;
   if (file) {
-    // loadFile支持buffer数据，也支持解决了跨域问题的文件地址链接（cors支持的文件地址或者在您的项目中nginx代理转发的下载地址都可以）
     const buffer = await file.arrayBuffer();
-    pdfComp.value?.loadFile(buffer);
+    pdfMobileComp.value?.loadFile(buffer);
+    const reReadBuffer = await file.arrayBuffer();
+    pdfComp.value?.loadFile(reReadBuffer);
+    
     console.log(pdfComp.value);
-    // 会把pdfjs和pdfViewer等暴露出来
-    // 可以自定义绑定pdfjs和pdfViewer内部事件、数据和方法
   }
@@ -50,2 +54,27 @@ }
 }
+function customTheme() {
+  theme.value = {
+    '--pdf-toolbar-bg': '#ccc',
+    '--pdf-toolbar-input-bg': '#141414',
+    '--pdf-toolbar-text-color': '#EBEBEB',
+    '--pdf-toolbar-text-highlight': 'rgb(99 102 241)',
+    '--pdf-toolbar-bg-highlight': '#39383D',
+    '--pdf-show-bg': '#39383D',
+    '--pdf-thumbnail-bg': '#222',
+    '--pdf-thumbnail-border-color': '#39383D',
+    '--pdf-thumbnail-text-color': '#EBEBEB',
+    '--pdf-thumbnail-text-color-highlight': 'rgb(99 102 241)',
+    '--pdf-catalogue-text-color': '#EBEBEB',
+    '--pdf-catalogue-text-highlight': 'rgb(99 102 241)',
+    '--pdf-menu-setting-color': '#EBEBEB',
+    '--highlight-bg-color': 'rgba(230, 0, 120, 1)',
+    '--highlight-selected-bg-color': 'rgba(100, 0, 0, 1)',
+    '--pdf-mask-bg-color': 'rgba(34, 34, 34, .9)',
+    '--pdf-mask-process-bg-color': '#D7D7E0',
+    '--pdf-mask-process-highlight': 'rgb(167 139 250)',
+    '--pdf-mask-tip-color': 'rgb(107 114 128)',
+    '--pdf-mask-btn-color': 'rgb(167 139 250)',
+    '--pdf-mask-btn-highlight': 'rgb(192 132 252)'
+  }
+}
 </script>
@@ -56,12 +85,32 @@
     <button @click="openFile">选择文件</button>
+    <button @click="theme = 'dark'">黑色主题</button>
+    <button @click="theme = 'light'">浅色主题</button>
+    <button @click="customTheme">自定义主题</button>
     <input v-show="false" ref="fileInput" type="file" @change="handleFileChange">
-    <PDF
-      ref="pdfComp"
-      @pagesLoaded="(v) => console.log('pagesLoaded 全部页面加载完', v)"
-      @pageRendered="(v) => console.log('pageRendered 单页渲染', v)"
-      @pageChanging="(v) => console.log('pageChanging 当前页改变', v)"
-      @findChange="(v) => console.log('findChange 查找改变', v)"
-      @scaleChanging="(v) => console.log('scaleChanging 缩放比例改变', v)"
-      style="width: 800px; height: 500px; margin: auto;"
-    ></PDF>
+    <p>左侧为大尺寸工具栏，右侧为小尺寸工具栏</p>
+    <div 
+      style="display: flex;"
+    >
+      <PDF
+        ref="pdfComp"
+        :theme="theme"
+        @pagesLoaded="(v) => console.log('pagesLoaded', v)"
+        @pageRendered="(v) => console.log('pageRendered', v)"
+        @pageChanging="(v) => console.log('pageChanging', v)"
+        @findChange="(v) => console.log('findChange', v)"
+        @scaleChanging="(v) => console.log('scaleChanging 缩放比例改变', v)"
+        style="width: 800px; height: 500px; margin: auto;"
+      ></PDF>
+      <PDF
+        ref="pdfMobileComp"
+        :theme="theme"
+        @pagesLoaded="(v) => console.log('pagesLoaded', v)"
+        @pageRendered="(v) => console.log('pageRendered', v)"
+        @pageChanging="(v) => console.log('pageChanging', v)"
+        @findChange="(v) => console.log('findChange', v)"
+        @scaleChanging="(v) => console.log('scaleChanging 缩放比例改变', v)"
+        style="width: 300px; height: 500px; margin-left: 20px;"
+      ></PDF>
+    </div>
+    
   </div>
@@ -73,4 +122,3 @@ </template>
 </style>
-
 ```
 

No alert changes

Improved metrics

Total package byte prevSize

7061992

increased by0.02%

Number of lines in readme file

119

increased by67.61%

No dependency changes