zydx-plus 1.19.104 → 1.19.105

package/package.json

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

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

@@ -178,9 +178,13 @@ export default {
     },
     emits: ['see','del','complete','update:data','enclosureSuccess'],
     watch:{
-        data(e) {
-            this.editor.commands.setContent(json2html({node: "root",child: (e.html === undefined)? [] : e.html}))
-            this.uploadAttData = (e.enclosure === undefined)? [] : this.enclosureAction(e.enclosure)
+        // 强制监听data变化
+        data: {
+            handler: function (e, oldVal) {
+                this.editor.commands.setContent(json2html({node: "root",child: (e.html === undefined)? [] : e.html}))
+                this.uploadAttData = (e.enclosure === undefined)? [] : this.enclosureAction(e.enclosure)
+            },
+            deep: true
         }
     },
     mounted() {
@@ -387,15 +391,33 @@ export default {
     line-height: 22px;
 }
 .enclosure-list{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     margin: 5px 20px 0 20px;
     height: 22px;
     line-height: 22px;
 }
+.enclosure-list:after{
+    content: "";
+    clear: left;
+    display: block;
+}
+.enclosure-item:first-child{
+    width: calc(100% - 210px);
+}
+.enclosure-item:last-child{
+    width: 210px;
+}
 .enclosure-item{
-    flex: 1;
+    height: 22px;
+    float: left;
+}
+.enclosure-item>span{
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+    box-sizing: border-box;
+    padding-right: 20px;
 }
 .en-but{
     text-align: right;

package/src/components/textarea/src/textarea.vue

@@ -1,5 +1,8 @@
 <template>
-    <div class="text" :style="{'min-height': height + 'px'}" :contenteditable="true" ref="textarea"></div>
+    <div class="textarea">
+        <div class="text" :style="{'min-height': height + 'px'}" @input="event => checkLength(event, maxLength)" :contenteditable="true" ref="textarea"></div>
+        <span class="num" v-if="maxLength !== 0">{{ num }}/{{ maxLength }}</span>
+    </div>
 </template>
 
 <script>
@@ -8,6 +11,11 @@ import Textarea from "@/App.vue";
 export default {
     name: "zydx-textarea",
     components: {Textarea},
+    data() {
+        return {
+            num: 0
+        }
+    },
     props: {
         value: {
             type: String,
@@ -16,6 +24,10 @@ export default {
         height: {
             type: Number,
             default: 200
+        },
+        maxLength: {
+            type: Number,
+            default: 0
         }
     },
     watch: {
@@ -27,6 +39,16 @@ export default {
         this.$refs.textarea.innerHTML = this.value
     },
     methods: {
+        checkLength(event, maxLength) {
+            if(maxLength === 0) return
+            const text = event.target.innerText;
+            this.num = text.length
+            if (text.length >= maxLength) {
+                event.preventDefault();
+                event.target.innerText = text.substr(0, maxLength);
+                event.target.blur();
+            }
+        },
         getContent() {
             const html = this.$refs.textarea.innerHTML
             return html.replace(/<div>/g, '<br>').replace(/<\/div>/g, '').replace(/<p>/g, '<br>').replace(/<\/p>/g, '')
@@ -36,10 +58,20 @@ export default {
 </script>
 
 <style scoped>
+.textarea{
+    position: relative;
+}
+.num{
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    z-index: 1;
+}
    .text{
        width: 100%;
        border: 1px solid #ccc;
        padding: 10px;
        box-sizing: border-box;
+       background-color: #fff;
    }
 </style>

package/src/index.js

@@ -57,7 +57,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.19.104',
+    version: '1.19.105',
     install,
     Calendar,
     Message,