zydx-plus 1.28.132 → 1.28.133

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.28.132",
+  "version": "1.28.133",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/dragPopup/src/dragPopup.vue

@@ -1,12 +1,10 @@
 <template>
    <div class="drag-pop" :style="position">
-       <div class="drag-head"
-            :style="{'background-color':titleColor}"
-            @mousedown="mousedown"
-            @mousemove="mousemove"
-            @mouseup="mouseup"
-            @mouseleave="mousemove">
-           <span>按住可拖动弹窗</span>
+       <div class="drag-head" :style="{'background-color':titleColor}">
+           <span @mousedown="mousedown"
+                 @mousemove="mousemove"
+                 @mouseup="mouseup"
+                 @mouseleave="mousemove">按住可拖动弹窗</span>
            <i @click.stop="close"></i>
        </div>
        <div class="drag-cont" @mousemove="footMove" @mouseleave="footMove">
@@ -185,8 +183,17 @@ export default {
 }
 .drag-head span{
     text-align: center;
-    width: 100%;
+    width: calc(100% - 30px);
     display: inline-block;
+    margin-right: 40px;
+}
+@keyframes linkDown {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
 .drag-pop {
     position: fixed;
@@ -194,6 +201,8 @@ export default {
     background-color: #fff;
     border-radius: 3px;
     z-index: 999;
+    animation: linkDown .3s linear forwards;
+    opacity: 0;
 }
 .drag-head{
     height: 30px;

package/src/components/read/src/read.vue

@@ -2,7 +2,11 @@
   <div class="read">
       <vue-office-docx v-if="fileType === 'docx'" :src="url" style="height: 100%;" @rendered="renderedHandler" />
       <vue-office-excel v-if="fileType === 'xlsx'" :src="url" style="height: 100%;" @rendered="renderedHandler" />
-      <div class="view-pdf" v-if="fileType === 'pdf'" id="canvas-wrap"></div>
+      <div class="view-pdf" v-if="fileType === 'pdf'">
+          <div class="pageContainer" v-for="(item,index) in idArr">
+              <canvas :id="item"></canvas>
+          </div>
+      </div>
       <div class="mp4" v-if="fileType === 'mp4'">
           <video :src="url" controls></video>
       </div>
@@ -11,7 +15,7 @@
       </div>
       <div v-if="loading" class="loading-back">
           <div class="loading-cont">
-              <div class="loading">Loading</div>
+              <div class="loadings">Loading</div>
           </div>
       </div>
   </div>
@@ -40,6 +44,7 @@ export default {
             pdfPages: 0,
             loading: true,
             repeat: false,
+            idArr: []
         }
     },
     props: {
@@ -61,14 +66,14 @@ export default {
     },
     methods: {
         repeatInit() {
-            if(this.repeat) return // 防止重复加载
+            if (this.repeat) return // 防止重复加载
             this.repeat = true
             this.loading = true
             this.fileType = this.url.split('.').pop()
-            if(this.fileType === 'pdf') this.init()
+            if (this.fileType === 'pdf') this.init()
             setTimeout(() => {
                 this.repeat = false
-            },1000)
+            }, 1000)
         },
         renderedHandler() {
             this.loading = false
@@ -78,59 +83,44 @@ export default {
             const loadingTask = PdfJs.getDocument(this.url)
             loadingTask.promise.then((pdf) => {
                 that.pdfPages = pdf.numPages // 获取pdf文件的总页数
-                for (let i = 0; i < that.pdfPages; i++) {
-                    let inx = i+1
-                    pdf.getPage(inx).then(function (page) {
-                        let viewport = page.getViewport({scale: 1.3})
-                        return page.getOperatorList().then(function(opList) {
-                            let svgGfx = new PdfJs.SVGGraphics(page.commonObjs, page.objs)
-                            return svgGfx.getSVG(opList, viewport).then(function(svg) {
-                                that.svgArr.push({
-                                    index: inx,
-                                    width: viewport.width,
-                                    height: viewport.height,
-                                    data: svg
-                                })
-                            })
-                        })
-                    })
-                }
+                let page = pdf.numPages
+                // if(that.pdfPages > 5) page = 5
+                that.getPDF(pdf,page)
             })
-            setTimeout(() => {
-                that.sortArr()
-            },100)
         },
-        // 数组根据索引排序
-        sortArr() {
-            for(let j = 0; j < this.svgArr.length;j++){
-                let temp = this.svgArr[j],
-                    val  = temp['index'],
-                    i = j-1;
-                while(i >=0 && this.svgArr[i]['index']>val){
-                    this.svgArr[i+1] = this.svgArr[i];
-                    i = i-1;
-                }
-                this.svgArr[i+1] = temp;
+        getPDF(pdf,page) {
+            let that = this
+            for (let i = 0; i < page; i++) {
+                const id = 'canvas' + Math.random().toString(36).substr(2)
+                that.idArr.push(id)
+                pdf.getPage(that.idArr.length).then(function (page) {
+                    let canvas = document.getElementById(id)
+                    let ctx = canvas.getContext('2d');
+                    let viewport = page.getViewport({scale: 1.35})
+                    canvas.width = viewport.width * 2
+                    canvas.height = viewport.height * 2
+                    canvas.style.width = viewport.width + 'px'
+                    canvas.style.height = viewport.height + 'px'
+                    let renderContext = {
+                        canvasContext: ctx,
+                        viewport: viewport,
+                        transform: [2, 0, 0, 2, 0, 0]
+                    }
+                    page.render(renderContext)
+                })
             }
-            this.svgArr.forEach(x => {
-                let container = document.createElement('div')
-                container.id = 'canvas_' + x.index
-                container.className = 'pageContainer'
-                container.style.width = x.width + 'px'
-                container.style.height = x.height + 'px'
-                container.style.display = 'inline-block'
-                container.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)'
-                container.style.marginBottom = '5px'
-                document.getElementById('canvas-wrap').appendChild(container)
-                container.appendChild(x.data)
-            })
-            this.renderedHandler()
-        },
+            that.renderedHandler()
+        }
     }
 }
 </script>
 
 <style scoped>
+.pageContainer{
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    margin-bottom: 10px;
+    display: inline-block;
+}
 .mp4,.mp3{
     width: 100%;
 }
@@ -171,7 +161,7 @@ export default {
     display: inline-block;
     margin: 0 auto;
 }
-.loading {
+.loadings {
     display: inline-block;
     font-size: 28px;
     font-family: Arial, Helvetica, sans-serif;
@@ -182,7 +172,7 @@ export default {
     position: relative;
 }
 
-.loading::after {
+.loadings::after {
     content: "Loading";
     position: absolute;
     left: 0;

package/src/components/tipBox/src/main.vue

@@ -136,7 +136,7 @@ export default {
             this.inputArr[index].value = file
         },
         isNumberKey(evt,index) {
-            const charCode = (evt.which) ? evt.which : event.keyCode;
+            const charCode = (evt.which) ? evt.which : evt.keyCode;
             if(this.inputArr[index].value === undefined) return true
             let val = this.inputArr[index].value.toString()
             if (charCode === 46) {

package/src/components/tipBox/src/zydxStyle.css

@@ -1,3 +1,11 @@
+@keyframes linkDown {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .tip-popupWindowSearch{
   position: fixed;
   top: 0;
@@ -17,6 +25,8 @@
   border: 5px rgba(0, 0, 0, .1) solid;
   margin: 0 auto;
   box-sizing: border-box;
+  animation: linkDown .3s linear forwards;
+  opacity: 0;
 }
 .tip-boxContent{
   max-height: 600px;

package/src/index.js

@@ -67,7 +67,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.28.132',
+    version: '1.28.133',
     install,
     Calendar,
     Message,