zydx-plus 1.32.190 → 1.32.192

package/package.json

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

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

@@ -105,7 +105,7 @@ export default {
     },
     computed: {
         position() {
-            return `transform: translate(${this.x}px, ${this.y}px);width:${this.footRightOffset}px;height:${this.footDownOffset}px;`;
+            return `top:${this.y}px;left:${this.x}px;width:${this.footRightOffset}px;height:${this.footDownOffset}px;`;
         },
     },
     emits: ['dragStatus','close','enlarge'],

package/src/components/editor/src/butJson.js

@@ -18,10 +18,10 @@ export function butJson (editor,data) {
                 {name: '(左)黑体5号', key: 'blackLeft5'},
             ],
             html: {
-                blackCenter4: `<p data-signId="title-1" class="${randomId()}" style="text-align: center;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 16px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
-                blackLeft4: `<p data-signId="title-2" class="${randomId()}" style="text-align: left;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 16px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
-                blackCenter5: `<p data-signId="title-3" class="${randomId()}" style="text-align: center;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 14px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
-                blackLeft5: `<p data-signId="title-4" class="${randomId()}" style="text-align: left;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 14px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
+                blackCenter4: `<p data-signId="title-1" class="title ${randomId()}" style="text-align: center;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 16px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
+                blackLeft4: `<p data-signId="title-2" class="title ${randomId()}" style="text-align: left;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 16px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
+                blackCenter5: `<p data-signId="title-3" class="title ${randomId()}" style="text-align: center;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 14px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
+                blackLeft5: `<p data-signId="title-4" class="title ${randomId()}" style="text-align: left;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 14px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
             }
         },
         textMenu: {
@@ -32,8 +32,8 @@ export function butJson (editor,data) {
                 {name: '楷体5号', key: 'regular5'},
             ],
             html: {
-                Song5: `<p style="text-align: left;"><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: SimSun">请输入正文</span></p>`,
-                regular5: `<p style="text-align: left;"><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi">请输入正文</span></p>`,
+                Song5: `<p class="text" style="text-align: left;"><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: SimSun">请输入正文</span></p>`,
+                regular5: `<p class="text" style="text-align: left;"><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi">请输入正文</span></p>`,
             }
         },
         redMenu: {
@@ -46,7 +46,7 @@ export function butJson (editor,data) {
             name: '添加作者',
             key: 'authorMenu',
             menuKeys: [],
-            html: `<p <p contenteditable="false" data-signId="author" style="text-align: center;"><span style="color: rgb(0, 0, 0);font-size: 14px;">${menusData(data,'authorMenu').text}</span></p>`
+            html: `<p contenteditable="false" class="author" data-signId="author" style="text-align: center;"><span style="color: rgb(0, 0, 0);font-size: 14px;">${menusData(data,'authorMenu').text}</span></p>`
         },
         subjectMenu: {
             name: '添加题目',
@@ -70,13 +70,13 @@ export function butJson (editor,data) {
             name: '关键词',
             key: 'keywordMenu',
             menuKeys: [],
-            html: `<p><span style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关键词：</span><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi">关键词内容...</span></p>`
+            html: `<p class="keyword"><span style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关键词：</span><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi">关键词内容...</span></p>`
         },
         abstractMenu: {
             name: '添加摘要',
             key: 'abstractMenu',
             menuKeys: [],
-            html: `<p><span style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;摘要：</span><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi">摘要内容...</span></p>`
+            html: `<p class="abstract"><span style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;摘要：</span><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi">摘要内容...</span></p>`
         },
         literatureMenu: {
             name: '添加文献',

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

@@ -29,7 +29,7 @@
                 </div>
             </div>
         </div>
-        <div class="editor-content" v-show="editableShow">
+        <div class="editor-content" :class="{'editor-content-show': !editableShow}">
             <div class="editing">
                 <div class="editing-header" v-if="signMenuShow">
                     <img :src="menusData('signMenu')?.ico" alt=""/>
@@ -46,7 +46,7 @@
                 <img :src="menusData('signMenu')?.ico" alt=""/>
                 <span>{{ menusData('signMenu')?.text }}</span>
             </div>
-            <div class="read-only-page" v-for="(item,index) in htmlArr">
+            <div class="read-only-page" :style="{height: wit * 1.4 + 'px',width: wit + 'px'}" v-for="(item,index) in htmlArr">
                 <div class="read-only-p" v-html="item"></div>
                 <div class="read-only-a">{{ index + 1 }}/{{ htmlArr.length }}</div>
             </div>
@@ -97,7 +97,8 @@ export default {
             imgUrl: '', // 图片地址
             imgType: '', // 图片类型
             htmlArr: [],
-            editableShow: true
+            editableShow: true,
+            wit: 0
         }
     },
     props: {
@@ -169,7 +170,7 @@ export default {
                 })
                 if (this.page) {
                     this.editableShow = !e
-                    this.readOnlyPage()
+                    this.readOnlyPage() // 只读分页
                 }
             },
             deep: true
@@ -247,6 +248,40 @@ export default {
     },
     emits: ['confirm', 'enclosure'],
     methods: {
+        signMenu() { // 签名菜单
+            this.signMenuShow = !this.signMenuShow
+        },
+        titleMenu(next) { // 标题菜单
+            next(this.classShow('title'))
+        },
+        authorMenu(next) { // 作者菜单
+            next(this.classShow('author'))
+        },
+        abstractMenu(next) { // 摘要菜单
+            next(this.classShow('abstract'))
+        },
+        keywordMenu(next) { // 关键词菜单
+            next(this.classShow('keyword'))
+        },
+        textMenu(next) { // 文本菜单
+            next(this.classShow('text'))
+        },
+        classShow(v) {
+            if(!this.readOnly) return
+            let state = false
+            const cls = document.getElementsByClassName(v)
+            for (let i = 0; i < cls.length; i++) {
+                if (cls[i].style.display === 'none') {
+                    cls[i].style.display = 'block'
+                    state = false
+                } else {
+                    cls[i].style.display = 'none'
+                    state = true
+                }
+            }
+            this.readOnlyPage()
+            return state
+        },
         exportToWord() {
             const wrap = document.getElementById('test')
             const config = {
@@ -262,10 +297,20 @@ export default {
         readOnlyPage() {
             this.htmlArr = []
             const data = document.querySelectorAll('.editing-cont')[0].childNodes[0].childNodes
-            let max = 950
+            this.wit = document.getElementsByClassName('editor-content')[0].offsetWidth
+            let max = this.wit * 1.4 - 200
             let pHeight = 0
             let html = ''
             for (let i = 0; i < data.length; i++) {
+                if(data[i].firstChild.localName === 'img') {
+                    const img = data[i].firstChild
+                    const imgHeight = img.offsetHeight
+                    if((pHeight + imgHeight) > max) {
+                        this.htmlArr.push(html)
+                        pHeight = 0
+                        html = ''
+                    }
+                }
                 let text = data[i].offsetHeight
                 if (data[i].dataset?.signid === 'ack') {
                     this.htmlArr.push(html)
@@ -274,14 +319,16 @@ export default {
                 }
                 if ((pHeight + text) > max) {
                     const {start, end} = this.rows(data[i], max - pHeight)
-                    html += `<p>${start}</p>`
+                    html += `<p>${start.data}</p>`
                     this.htmlArr.push(html)
                     pHeight = 0
                     html = ''
-                    html += `<p>${end}</p>`
+                    html += `<p>${end.data}</p>`
+                    pHeight = end.size
+                }else {
+                    pHeight += text
+                    html += data[i].outerHTML
                 }
-                pHeight += text + 5
-                html += data[i].outerHTML
                 if (i === data.length - 1) {
                     this.htmlArr.push(html)
                     pHeight = 0
@@ -294,13 +341,17 @@ export default {
             let size = parseInt(window.getComputedStyle(data, null).fontSize)
             let line = parseInt(window.getComputedStyle(data, null).lineHeight)
             let width = data.offsetWidth
+            let height = data.offsetHeight
             let rows = Math.round(num / line)  // 行数
             let text = data.innerText
-            let len = this.measureText(text,size)
-            let textLen = Math.round((width / (len/text.length)) * rows)
+            let len = this.measureText(text,size) // 文本宽度
+            let textLen = Math.round((width / (len/text.length)) * rows) // 文本长度
             let start = text.slice(0, textLen)
             let end = text.slice(textLen)
-            return {start, end}
+            return {
+                start: {data: start, size: num},
+                end: {data: end, size: height - num}
+            }
         },
         measureText (text, fontSize=10) {
             text = String(text);
@@ -649,19 +700,17 @@ export default {
 <style scoped>
 .read-only {
     position: relative;
-    width: 794px;
     margin: 0 auto;
 }
 
 .read-only-page {
     width: 100%;
-    height: 1123px;
     padding: 100px;
     background-color: #fff;
     box-sizing: border-box;
     position: relative;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    margin: 20px 0;
+    border: 1px solid #ccc;
+    margin: 10px 10px 20px 10px;
 }
 
 .read-only-p {
@@ -675,7 +724,7 @@ export default {
 
 .read-only-a {
     position: absolute;
-    bottom: 25px;
+    bottom: 70px;
     left: 50%;
     z-index: 1;
     font-size: 14px;
@@ -746,7 +795,7 @@ label {
 .editing-header {
     position: absolute;
     top: 10px;
-    left: 10px;
+    left: 20px;
     display: flex;
     z-index: 1;
 }
@@ -853,6 +902,12 @@ li {
     margin: 10px;
     border: 1px solid rgba(204, 204, 204, 1);
 }
+.editor-content-show{
+    position: fixed;
+    top: -9999px;
+    left: 0;
+    z-index: -1;
+}
 
 .editing {
     width: 794px;

package/src/index.js

@@ -77,7 +77,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.32.190',
+    version: '1.32.192',
     install,
     Calendar,
     Message,