zydx-plus 1.11.45 → 1.12.45

package/package.json

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

package/src/components/word/index.js

@@ -0,0 +1,6 @@
+import main from './src/word';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/word/src/word.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="page">
+        <div class="page-content" v-for="(item,index) in pages" :key="index" v-html="item"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "zydx-word",
+    data() {
+        return {
+            perPage: 38,
+            pages: [],
+            imgList: [], // 图片列表
+            strNum: 76, // 每行字符数
+            pagesText: '', // 每页内容
+            start: 0,
+        }
+    },
+    props: {
+        content: {
+            type: String,
+            default: ''
+        }
+    },
+    mounted() {
+        this.splitHtml(this.content, this.perPage)
+    },
+    methods: {
+        getImgHeight(imgs) {
+            // 获取img标签里的图片地址
+            imgs = imgs.join('')
+            imgs = imgs.match(/<img.*?>/g)
+            if (imgs === null) return
+            for (let i = 0; i < imgs.length; i++) {
+                // 获取图片地址
+                imgs[i] = imgs[i].match(/src=".*?"/g)[0].replace(/src="|"/g, '')
+                const img = new Image()
+                img.src = imgs[i]
+                img.onload = () => {
+                    let height = img.height
+                    let width = img.width
+                    // 计算图片比例
+                    const scale = height / width
+                    // 计算图片高度整数
+                    height = Math.floor(693 * scale)
+                    this.imgList.push({
+                        src: imgs[i],
+                        height: height,
+                        width: width,
+                        index: i
+                    })
+                }
+            }
+        },
+        resetData() {
+            this.start = 0
+            this.pages.push(this.pagesText)
+            this.pagesText = ''
+        },
+        splitHtml(html, perPage) {
+            const arr = html.split('</p>')
+            this.getImgHeight(arr)
+            setTimeout(() => {
+                // 重新排序
+                this.imgList.sort((a, b) => {
+                    return a.index - b.index
+                })
+                let imgIndex = 0
+                // 筛选出标签里的内容
+                for (let i = 0; i < arr.length; i++) {
+                    // 判断是否是最后一个
+                    if (arr.length - 1 === i) {
+                        this.pagesText += `${arr[i]}`
+                        this.resetData()
+                        break
+                    }
+                    if (this.start >= perPage) this.resetData()
+                    // 判断是否是img标签
+                    if (arr[i].indexOf('<img') > -1) {
+                        const h = this.imgList[imgIndex].height
+                        const w = this.imgList[imgIndex].width
+                        const src = this.imgList[imgIndex].src
+                        const hNum = Math.ceil(h / 27)
+                        if ((perPage - this.start) < hNum) this.resetData()
+                        this.start += hNum
+                        this.pagesText += `<p style="text-align: center;"><img style="width: ${(w < 693) ? w : 693}px;height: ${(h > 1020) ? 1020 : h}px;vertical-align: middle;padding: 14px 0" src="${src}" alt="" /></p>`
+                        imgIndex += 1
+                    } else {
+                        // 判断标签是否是h1-h6
+                        if (arr[i].indexOf('<h') > -1) {
+                            arr[i] = arr[i].replace(/<h[1-6]>/g, '<p style="font-size: 18px;font-weight: bold;">')
+                            arr[i] = arr[i].replace(/<\/h[1-6]>/g, '</p>')
+                        }
+                        const text = arr[i].replace(/<[^>]+>/g, '')
+                        const lenNum = Math.ceil(this.thatLenText(text,0).len / this.strNum)
+                        if ((perPage - this.start) < lenNum) {
+                            const { st, end, surplus } = this.thatLenText(text,(perPage - this.start),lenNum)
+                            this.pagesText += `<p>${st}</p>`
+                            this.resetData()
+                            this.start = surplus
+                            this.pagesText = `<p>${end}</p>`
+                        }else {
+                            this.start += (lenNum <= 0) ? 1 : lenNum
+                            this.pagesText += `${arr[i]}`
+                        }
+                    }
+                }
+            }, 200)
+        },
+        // 计算每行字符数
+        thatLenText(data,num,lenNum) {
+            let len = 0
+            let st = ''
+            let end = ''
+            for(let i= 0; i < data.length; i++) {
+                if(data[i].replace(/[^\u4e00-\u9fa5]/g, '')) {
+                    len += 2
+                }else if(data[i].match(/[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u2014|\u2026|\u2013]/g)) {
+                    len += 2
+                }else if(data[i].match(/[a-zA-Z]/g)) {
+                    len += 1
+                }else {
+                    len += 1
+                }
+                if(len <= num*this.strNum) {
+                    st += data[i]
+                }else {
+                    end += data[i]
+                }
+            }
+            return {st, end, len, row: num-1, surplus: lenNum - num}
+        }
+    }
+}
+</script>
+
+<style scoped>
+.page {
+    text-align: center;
+    width: 100%;
+}
+
+.page-content {
+    width: 793px;
+    height: 1122px;
+    background-color: #fff;
+    padding: 50px;
+    display: inline-block;
+    box-sizing: border-box;
+    white-space: pre-wrap;
+    text-align: left;
+    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
+    margin-bottom: 30px;
+    font-size: 18px;
+    line-height: 1.5;
+    page-break-after: always;
+    position: relative;
+}
+</style>

package/src/index.js

@@ -14,6 +14,7 @@ import treeList from './components/treeList/index';
 import flip from './components/flip/index';
 import editor from './components/editor/index';
 import tab from './components/tab/index';
+import word from './components/word/index';
 
 const components = [
     Calendar,
@@ -29,7 +30,8 @@ const components = [
     treeList,
     flip,
     editor,
-    tab
+    tab,
+    word
 ];
 
 function install(app) {
@@ -41,7 +43,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.11.45',
+    version: '1.12.45',
     install,
     Calendar,
     Message,
@@ -58,6 +60,7 @@ export default {
     treeList,
     flip,
     editor,
-    tab
+    tab,
+    word
 };