zydx-plus 1.28.127 → 1.28.129

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.28.127",
+  "version": "1.28.129",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -33,6 +33,8 @@
     "@tiptap/vue-3": "^2.0.3",
     "@tiptap/extension-text-align": "^2.0.3",
     "@tiptap/extension-placeholder": "^2.0.3",
+    "@tiptap/extension-text-style": "^2.0.3",
+    "@tiptap/extension-color": "^2.0.3",
     "@vue-office/docx": "^1.1.3",
     "@vue-office/excel": "^1.1.3"
   },

package/src/components/editor2/src/editor.vue

@@ -82,6 +82,8 @@ import StarterKit from '@tiptap/starter-kit'
 import Image from '@tiptap/extension-image'
 import TextAlign from '@tiptap/extension-text-align'
 import Placeholder from '@tiptap/extension-placeholder'
+import Color from '@tiptap/extension-color'
+import textStyle from '@tiptap/extension-text-style'
 export default {
     name: 'zydx-xiao-editor',
     components: {
@@ -213,6 +215,10 @@ export default {
             editable: this.readOnly,
             extensions: [
                 StarterKit,
+                textStyle,
+                Color.configure({
+                    types: ['textStyle'],
+                }),
                 Placeholder.configure({
                     placeholder: this.placeholder,
                 }),
@@ -383,6 +389,11 @@ export default {
             if(v === 'p') this.editor.chain().focus().setParagraph().run()
             if(v === 'bold') this.editor.chain().focus().toggleBold().run()
             if(v === 'center' || v === 'left' || v === 'right') this.editor.chain().focus().setTextAlign(v).run()
+            if(v === 'add') {
+                let html = this.editor.getHTML()
+                html += '<p style="text-align: right;"><span style="color: #999;">请填来源</span></p>'
+                this.editor.commands.setContent(html)
+            }
         }
     }
 }

package/src/components/flip/src/flip.vue

@@ -4,6 +4,9 @@
             <div class="book">
                 <div class="pages">
                     <div class="wrap">
+                        <div class="wrap-one" :class="{'flip-animation-start': flipRights, 'flip-animation-end': flipLefts}" v-if="oneShow" :style="canvasStyle">
+                            <img :src="imgArr[(oneIndex === 'right')? pageIndex-1: pageIndex]" alt="" />
+                        </div>
                         <div class="wrap-can">
                             <canvas :id="id"></canvas>
                         </div>
@@ -43,7 +46,12 @@ export default {
             pagesData: [],
             opacity: 1,
             id: null,
-            loading: false
+            loading: false,
+            canvasStyle: {},
+            oneShow: false,
+            flipRights: false,
+            flipLefts: false,
+            oneIndex: 'right'
         }
     },
     props: {
@@ -85,12 +93,13 @@ export default {
     },
     methods: {
         flipLeft(e,v) {
-            if(e <= 1) {
+            if(e < 1) {
                 this.pageIndex = 1
                 return
             }else {
                 this.pageIndex = e
             }
+            this.oneIndex = 'left'
             this.readPdf()
             if(!v) {
                 this.$emit('flip', {
@@ -106,6 +115,7 @@ export default {
             }else {
                 this.pageIndex = e
             }
+            this.oneIndex = 'right'
             this.readPdf()
             if(!v) {
                 this.$emit('flip', {
@@ -115,19 +125,26 @@ export default {
             }
         },
         readPdf() {
+            if(this.source === '' || this.source === undefined || this.source === null) return
             let that = this
             that.loading = true
+            that.oneShow = that.pageIndex !== 1
             const loadingTask = PdfJs.getDocument(this.source)
             loadingTask.promise.then((pdf) => {
                 that.pdfPages = pdf.numPages // 获取pdf文件的总页数
                 pdf.getPage(that.pageIndex).then(function (page) {
                     let canvas = document.getElementById(that.id)
                     let ctx = canvas.getContext('2d');
-                    let viewport = page.getViewport({scale: 1.4})
+                    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'
+                    that.canvasStyle = {
+                        width: viewport.width + 'px',
+                        height: viewport.height + 'px',
+                        marginLeft: -(viewport.width/2) + 'px'
+                    }
                     let renderContext = {
                         canvasContext: ctx,
                         viewport: viewport,
@@ -135,6 +152,20 @@ export default {
                     }
                     page.render(renderContext)
                     that.loading = false
+                    if(that.oneIndex === 'right') {
+                        that.flipRights = true
+                        that.flipLefts = false
+                    }else {
+                        that.flipRights = false
+                        that.flipLefts = true
+                    }
+                    // 获取canvas的base64数据
+                    setTimeout(() => {
+                        that.flipRights = false
+                        that.flipLefts = false
+                        that.oneShow = false
+                        that.imgArr[that.pageIndex] = canvas.toDataURL('image/jpeg', 1)
+                    }, 1000)
                 })
             })
         }
@@ -143,11 +174,64 @@ export default {
 </script>
 
 <style scoped>
+/*动画部分*/
+/*I'm the home page动画*/
+.flip-animation-start {
+    transform-origin: left center;
+    animation: flipBook1 1s forwards;
+}
+.flip-animation-end {
+    transform-origin: left center;
+    animation: flipBook2 1s forwards;
+}
+@keyframes flipBook1 {
+    0% {
+        transform: perspective(3000px) rotateY(0deg);
+        opacity: 1;
+    }
+    60%{
+        opacity: 1;
+    }
+    100% {
+        transform: perspective(3000px) rotateY(-160deg);
+        opacity: 0;
+    }
+}
+/*关闭书页*/
+@keyframes flipBook2 {
+    0% {
+        transform: perspective(3000px) rotateY(-160deg);
+        opacity: 0;
+    }
+    30%{
+        opacity: 1;
+    }
+    70%{
+        opacity: 1;
+    }
+    100% {
+        transform: perspective(3000px) rotateY(0deg);
+        opacity: 0;
+    }
+}
+.wrap-one{
+    position: absolute;
+    top: 0;
+    left: 50%;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+}
+.wrap-one img{
+    width: 100%;
+    height: 100%;
+}
 .wrap{
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
+    position: relative;
 }
 .wrap-can{
     display: inline-block;

package/src/index.js

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