zydx-plus 1.11.44 → 1.12.45

package/package.json

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

package/src/components/buttonGroup/src/buttonGroup.vue

@@ -37,9 +37,9 @@ export default defineComponent({
       }
 
     },
-    onInputChange({ event, accept = '*', file_size = 2, cb }) {
+    onInputChange({ event, accept = [], file_size = 2, cb, disabled }) {
+      if (disabled) return
       let file = event.target.files[0]
-      let accept_list = accept.split(',')
       if (file.size > file_size * 1024 * 1024) {
         this.$messages({
           title: '提示',
@@ -48,10 +48,10 @@ export default defineComponent({
         })
         return
       }
-      if (!accept_list.includes(file.type)) {
+      if (accept.length && !accept.includes(file.type)) {
         this.$messages({
           title: '提示',
-          promptContent: `请选择${accept_list.join('、')}格式的文件`,
+          promptContent: `请选择${accept.join('、')}格式的文件`,
           cancelShow: false,
         })
         return
@@ -83,9 +83,11 @@ export default defineComponent({
             {this.active_state[idx] ? active_name : name}
           </button>
         case 'file':
-          return <label class="z-button">
+          return <label class={disabled ? 'z-button disabled' : 'z-button'} >
             <span>{name}</span>
-            <input type="file" class="hidden" onClick={(e) => e.target.value = null} onChange={(e) => onInputChange({ event: e, accept, file_size, cb: onClick })}></input>
+            {
+              disabled ? null : <input type="file" class="hidden" onClick={(e) => e.target.value = null} onChange={(e) => onInputChange({ event: e, accept, file_size, cb: onClick, disabled })}></input>
+            }
           </label>
         case 'search':
           return is_show_search
@@ -157,6 +159,12 @@ export default defineComponent({
   box-sizing: border-box;
 }
 
+.z-button.disabled {
+  background-color: #ffffff;
+  color: #717171;
+  border: #717171 1px solid;
+}
+
 .search_container {
   width: 180px;
   height: 20px;

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.44',
+    version: '1.12.45',
     install,
     Calendar,
     Message,
@@ -58,6 +60,7 @@ export default {
     treeList,
     flip,
     editor,
-    tab
+    tab,
+    word
 };