Selaa lähdekoodia

数据联动失焦触发

yangg 10 kuukautta sitten
vanhempi
sitoutus
cdb707a50f

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/index.html


+ 0 - 0
dist/static/css/chunk-684d1b1b.97a8613a.css → dist/static/css/chunk-2abbfbf3.97a8613a.css


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/app.cb9f54cd.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-2abbfbf3.e3427e67.js


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
dist/static/js/chunk-684d1b1b.6e5b158c.js


+ 44 - 3
src/views/document/com/components/TextArea/index.vue

@@ -130,9 +130,14 @@ export default {
       loading: false,
       progress: 0,
       isEditing: false,
+      focusedInputId: null,
     };
   },
   mounted() {},
+  // 记得在组件销毁时移除事件监听器
+  beforeDestroy() {
+    this.$el.removeEventListener("input", this.handleInputChange);
+  },
   methods: {
     async replaceData(data) {
       let _this = this;
@@ -172,7 +177,12 @@ export default {
             //文本
             data = data.replace(
               "{{" + attrId + "}}",
-              '<input type="text" id="' +
+              /* `<input type="text" class="text-input-box"  data-index="${i}" value="${_this.com.attrs[i].content}" @input="updateContent('${_this.com.attrs[i].id}', $event)" id="${attrId}">`, */
+              '<input type="text" ref="input_' +
+                attrId +
+                '" name="' +
+                _this.com.attrs[i].name +
+                '" id="' +
                 attrId +
                 '"  data-index="' +
                 i +
@@ -232,10 +242,10 @@ export default {
         } else if (_this.com.attrs[i].type == "formual") {
           //// console.log('attrs',_this.com.attrs[i]);
           //处理计算公式 不处理
-           let formual = await _this.analysisFormual(_this.com.attrs[i]);
+          let formual = await _this.analysisFormual(_this.com.attrs[i]);
 
           formual = await _this.getRemote(formual);
-          _this.com.attrs[i].content= eval(formual)
+          _this.com.attrs[i].content = eval(formual);
           data = data.replace("{{" + attrId + "}}", eval(formual));
 
           /* let formual = await _this.analysisFormual(_this.com.attrs[i]);
@@ -302,8 +312,39 @@ export default {
           data = data.replace("{{" + attrId + "}}", _this.com.attrs[i].content);
         }
       }
+      this.$nextTick(() => {
+        this.addInputListeners();
+      });
       return data;
     },
+    addInputListeners() {
+      // 使用事件委托来处理所有的 .text-input-box 元素
+      this.$el.addEventListener("blur", this.handleInputChange, true);
+    },
+
+    handleInputChange(event) {
+      if (event.target.classList.contains("text-input-box")) {
+        const attrId = event.target.id;
+        const attrName = event.target.name;
+        const dataIndex = parseInt(event.target.dataset.index, 10);
+        const newValue = event.target.value;
+        // 更新数据
+        if (this.com && this.com.attrs && this.com.attrs[dataIndex]) {
+          this.$set(this.com.attrs[dataIndex], "content", newValue);
+
+          this.com.attrs.forEach((el) => {
+            if (el.name === attrName) {
+              this.$set(el, "content", newValue);
+            }
+          });
+          this.$emit("onUpdateAttr", this.currentIndex, dataIndex, newValue);
+
+          // 使用 $nextTick 确保在 DOM 更新后执行
+        } else {
+          console.warn(`Unable to find attribute at index ${dataIndex}`);
+        }
+      }
+    },
 
     bindEvents() {
       let _this = this;

+ 9 - 4
src/views/document/com/components/TextView/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="template-textarea">
-    <div class="rich-editor" v-html="replaceData(com.content)"></div>
+    <div class="rich-editor" v-html="replaceData(com.content)" @input="handleInput"></div>
   </div>
 </template>
 
@@ -58,9 +58,7 @@ export default {
           //全局变量
           data = data.replace(
             "{{" + this.com.attrs[i].id + "}}",
-            '<input type="text" class="text-input-box" value="' +
-              this.com.attrs[i].content +
-              '">'
+            `<input type="text" class="text-input-box" :value="${this.com.attrs[i].content}" @input="updateContent('${this.com.attrs[i].id}', $event)" id="${this.com.attrs[i].id}">`
           );
         } else if (this.com.attrs[i].type == "Directory") {
           //处理目录
@@ -85,6 +83,13 @@ export default {
       }
       return data;
     },
+    updateContent(id, event) {
+      console.log(id,event);
+      const attr = this.com.attrs.find(attr => attr.id === id);
+      if (attr) {
+        attr.content = event.target.value;
+      }
+    },
     /* async replaceData(data) {
       let _this = this;
       for (var i = 0; i < _this.com.attrs.length; i++) {

+ 43 - 2
src/views/document/create.vue

@@ -403,8 +403,9 @@ export default {
   },
   watch: {
     coms: {
-      handler(val, value) {
-        this.replaceData(val);
+      handler(newComs, oldComs) {
+        this.updateAttrs(newComs, oldComs);
+        
       },
       immediate: true, //立即执行
       deep: true,
@@ -434,6 +435,46 @@ export default {
   },
 
   methods: {
+    updateAttrs(newComs, oldComs) {
+      newComs.forEach((newCom, comIndex) => {
+        const oldCom = oldComs[comIndex];
+        if (oldCom) {
+          newCom.attrs.forEach((newAttr, attrIndex) => {
+            const oldAttr = oldCom.attrs[attrIndex];
+            if (oldAttr && newAttr.content !== oldAttr.content) {
+              // 内容发生变化,进行全局更新
+              this.updateGlobalAttr(newAttr.name, newAttr.content);
+            }
+          });
+        }
+      });
+    },
+
+    updateGlobalAttr(attrId, newContent) {
+      // 遍历所有组件,更新匹配的属性
+      this.coms.forEach(com => {
+        com.attrs.forEach(attr => {
+          if (attr.name === attrId) {
+            attr.content = newContent;
+          }
+        });
+
+        // 如果是文本区域,还需要更新内容中的占位符
+        /* if (com.type === 'TextArea') {
+          com.content = com.content.replace(
+            new RegExp(`{{${attrId}}}`, 'g'),
+            newContent
+          );
+        } */
+      });
+
+      // 可能还需要更新其他地方,比如 docAttr 等
+      // this.docAttr.content = ...
+
+      // 触发视图更新
+      this.replaceData(this.coms);
+      this.$forceUpdate();
+    },
 
     async replaceData(data) {
       for (let item of this.coms) {

Kaikkia tiedostoja ei voida näyttää, sillä liian monta tiedostoa muuttui tässä diffissä