zydx-plus 1.30.157 → 1.30.159

package/package.json

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

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

@@ -1,13 +1,13 @@
 <template>
     <we-toolbar v-show="!readOnly && toolbar.length > 0" class="toolbar" :handle="handle"/>
-    <we-editable v-show="!editableShow" class="editable" :style="{'min-height': height + 'px'}" :handle="handle" v-model:json="formData.html" />
+    <we-editable v-show="!editableShow" class="editable" :style="{'min-height': height + 'px',opacity: readOnly? '0':'1'}" :handle="handle" v-model:json="formData.html" />
     <div class="but" v-if="!readOnly && toolbar.length > 0">
         <button class="def-but" v-if="butShow" @click="confirm">完成</button>
     </div>
     <div class="read-only" v-if="readOnly">
-        <div class="read-only-page" v-for="(item,index) in htmlArr" >
+        <div class="read-only-page" :style="{height: !page? 'auto': '1123px','box-shadow': !page? 'none': '0 0 10px rgba(0, 0, 0, 0.1)', 'padding': !page? '10px':'60px'}" 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 v-if="page" class="read-only-a">{{ index + 1 }}/{{ htmlArr.length }}</div>
         </div>
     </div>
 </template>
@@ -71,19 +71,24 @@ export default defineComponent({
         uploadAttachment: {
             type: Object,
             default: {}
+        },
+        page: {
+            type: Boolean,
+            default: true
         }
     },
     emits: ['confirm','enclosure'],
     watch: {
         html: {
             handler: function (e, oldVal) {
+                // 获取焦点
+                this.editableShow = false
                 this.formData.html = e
                 if(this.readOnly) {
-                    this.editableShow = false
                     setTimeout(() => {
                         this.editableShow = true
-                        if(this.readOnly) this.readOnlyPage()
-                    },0)
+                        this.readOnlyPage()
+                    },10)
                 }
             },
             deep: true,
@@ -91,33 +96,45 @@ export default defineComponent({
         },
         readOnly: {
             handler: function (e, oldVal) {
-                this.opts.editable.config.readOnly = e
                 this.editableShow = e
                 if(e) this.readOnlyPage()
             },
             deep: true
         },
+        page: {
+            handler: function (e, oldVal) {
+                if(!e) {
+                    setTimeout(() => {
+                        const data = document.querySelectorAll('.w-e-scroll')[0].childNodes[0].childNodes
+                        for (let i = 0; i < data.length; i++) {
+                            this.htmlArr.push(data[i].outerHTML)
+                        }
+                    },10)
+                }
+            },
+            deep: true,
+            immediate: true
+        }
     },
     mounted() {
-        // this.$nextTick(() => {
-        //     if(this.readOnly) this.readOnlyPage()
-        // })
         window.closeMaker = this.closeMaker
     },
     methods: {
         readOnlyPage() {
             this.htmlArr = []
             const data = document.querySelectorAll('.w-e-scroll')[0].childNodes[0].childNodes
+            let max = 1123
             let pHeight = 0
             let html = ''
             for (let i = 0; i < data.length; i++) {
                 let text = data[i].offsetHeight
-                if((pHeight + text) > 930) {
+                if((pHeight + text) > max) {
+                    // console.log(this.rows(data[i],(pHeight + text) - max))
                     this.htmlArr.push(html)
                     pHeight = 0
                     html = ''
                 }
-                pHeight += text
+                pHeight += text + 5
                 html += data[i].outerHTML
                 if(i === data.length - 1) {
                     this.htmlArr.push(html)
@@ -126,7 +143,21 @@ export default defineComponent({
                     break
                 }
             }
-            console.log(this.htmlArr)
+        },
+        rows(data,num) {
+            let line = parseInt(window.getComputedStyle(data, null).lineHeight)
+            let height = data.offsetHeight
+            let rows = Math.round(height/line)
+            let text = data.innerText
+            let textLen = Math.round(text.length/rows)
+            let start = text.slice(0,textLen)
+            let end = text.slice(textLen)
+            console.log(Math.round((height - num)/line))
+            console.log(rows)
+            // if(rows - num > 0) {
+            //     console.log(rows - num)
+            // }
+            return {start,end}
         },
         closeMaker(data) {
             this.$emit('enclosure',data)
@@ -155,7 +186,7 @@ export default defineComponent({
             editable: {
                 config: {
                     placeholder: props.placeholder,
-                    readOnly: props.readOnly,
+                    readOnly: false,
                     // autoFocus: (props.html !== ''),
                     autoFocus: true, // 自动聚焦
                     MENU_CONF: {
@@ -195,11 +226,8 @@ export default defineComponent({
 }
 .read-only-page{
     width: 794px;
-    height: 1123px;
     margin: 0 auto 20px auto;
     background-color: #fff;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    padding: 60px;
     box-sizing: border-box;
     position: relative;
 }
@@ -270,10 +298,6 @@ export default defineComponent({
 :deep(.w-e-text-container h5) {
     margin: 5px 0;
 }
-:deep(.w-e-text-container h6) {
-    margin: 5px 0;
-}
-
 
 :deep(.w-e-text-placeholder) {
     top: 6px;

package/src/index.js

@@ -71,7 +71,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.30.157',
+    version: '1.30.159',
     install,
     Calendar,
     Message,