连线等高

src/components/Adult/preview/Ligature.vue

@@ -4,7 +4,11 @@
       <div class="left">
         <ul>
           <div>{{ curQue.conTitle }}</div>
-          <li v-for="(item, index) in curQue.con" :key="'left' + index">
+          <li
+            :class="'left' + index + number"
+            v-for="(item, index) in curQue.con"
+            :key="'left' + index"
+          >
             <!--             :style="{
               background:
                 JSON.stringify(data).indexOf(item.nodeId) != -1
@@ -16,8 +20,13 @@
                 v-if="item.img_list.length > 0"
                 :src="item.img_list[0].id"
                 alt=""
+                @load="conImageload"
               />
-              <div class="text" :class="'left' + index">
+              <div
+                class="text"
+                :class="'left' + index"
+                v-if="item.detail.wordsList.length > 0 || item.detail.sentence"
+              >
                 <!-- 大于0就说明分词了 -->
                 <template v-if="item.detail.wordsList.length > 0">
                   <div
@@ -92,7 +101,11 @@
       <div class="right">
         <ul>
           <div>{{ curQue.optionTitle }}</div>
-          <li v-for="(item, index) in curQue.option" :key="'right' + index">
+          <li
+            :class="'right' + index + number"
+            v-for="(item, index) in curQue.option"
+            :key="'right' + index"
+          >
             <!--             :style="{
               background:
                 JSON.stringify(data).indexOf(item.nodeId) != -1
@@ -119,8 +132,13 @@
                 v-if="item.img_list.length > 0"
                 :src="item.img_list[0].id"
                 alt=""
+                @load="conImageload"
               />
-              <div class="text" :class="'right' + index">
+              <div
+                class="text"
+                :class="'right' + index"
+                v-if="item.detail.wordsList.length > 0 || item.detail.sentence"
+              >
                 <!-- 大于0就说明分词了 -->
                 <template v-if="item.detail.wordsList.length > 0">
                   <div
@@ -179,7 +197,7 @@
       </div>
     </div>
     <!-- 清除所有连线及连线的状态 -->
-    <div class="fuwei" :class="[TaskModel == 'ANSWER'?'notAllow':'']">
+    <div class="fuwei" :class="[TaskModel == 'ANSWER' ? 'notAllow' : '']">
       <div @click="clearLine">
         <img src="../../../assets/adult/fuwei.png" alt="" />
         复位
@@ -194,7 +212,7 @@
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
-  props: ["curQue","TaskModel"],
+  props: ["curQue", "TaskModel", "number"],
   data() {
     //这里存放数据
     return {
@@ -202,32 +220,32 @@ export default {
       leftList: [
         {
           text: "Arrive at the airport ahead of time ______",
-          nodeId: "left_1",
+          nodeId: "left_1"
         },
         {
           text: "Arrive at the airport ahead of time ______",
-          nodeId: "left_2",
+          nodeId: "left_2"
         },
         {
           text: "Arrive at the airport ahead of time ______",
-          nodeId: "left_3",
+          nodeId: "left_3"
         },
         {
           text: "Arrive at the airport ahead of time ______",
-          nodeId: "left_4",
+          nodeId: "left_4"
         },
         {
           text: "Arrive at the airport ahead of time ______",
-          nodeId: "left_5",
+          nodeId: "left_5"
         },
         {
           text: "Arrive at the airport ahead of time ______",
-          nodeId: "left_6",
+          nodeId: "left_6"
         },
         {
           text: "Arrive at the airport ahead of time ______",
-          nodeId: "left_7",
-        },
+          nodeId: "left_7"
+        }
       ],
       rightList: [
         { text: "把来访者直接送到宾馆", en: "a", nodeId: "right_1" },
@@ -236,8 +254,10 @@ export default {
         { text: "把来访者直接送到宾馆", en: "d", nodeId: "right_4" },
         { text: "把来访者直接送到宾馆", en: "e", nodeId: "right_5" },
         { text: "把来访者直接送到宾馆", en: "f", nodeId: "right_6" },
-        { text: "把来访者直接送到宾馆", en: "g", nodeId: "right_7" },
+        { text: "把来访者直接送到宾馆", en: "g", nodeId: "right_7" }
       ],
+      allimgnumber: 0,
+      lodimgnumber: 0
     };
   },
   //计算属性 类似于data概念
@@ -246,17 +266,17 @@ export default {
   watch: {
     curQue(val, oldval) {
       this.$forceUpdate(); //触发更新函数更新高度
-    },
+    }
   },
   //方法集合
   methods: {
     //   清除所有连线
     clearLine() {
-        if(!this.TaskModel||this.TaskModel!='ANSWER'){
-            this.jsPlumb.deleteEveryConnection(); //清除连线方法
-            this.data = [];
-            sessionStorage.removeItem("LineData");
-        }
+      if (!this.TaskModel || this.TaskModel != "ANSWER") {
+        this.jsPlumb.deleteEveryConnection(); //清除连线方法
+        this.data = [];
+        sessionStorage.removeItem("LineData");
+      }
     },
     showPlumb() {
       this.jsPlumb = this.$jsPlumb.getInstance({
@@ -293,7 +313,7 @@ export default {
           //   ],
         ],
         Connector: ["Straight"], // 要使用的默认连接器的类型：直线，折线，曲线等
-        DrapOptions: { cursor: "crosshair", zIndex: 2000 },
+        DrapOptions: { cursor: "crosshair", zIndex: 2000 }
       });
       this.jsPlumb.batch(() => {
         for (let i = 0; i < this.curQue.con.length; i++) {
@@ -302,42 +322,42 @@ export default {
         for (let j = 0; j < this.curQue.option.length; j++) {
           this.initLeaf(this.curQue.option[j].nodeId, "target");
         }
-      });    
+      });
       this.setjsPlumb(true, true);
       //点击连线
       this.jsPlumb.bind("click", (conn, originalEvent) => {
-          if(!this.TaskModel||this.TaskModel!='ANSWER'){
-            // 删除点击的线
-            this.data.forEach((item, i) => {
+        if (!this.TaskModel || this.TaskModel != "ANSWER") {
+          // 删除点击的线
+          this.data.forEach((item, i) => {
             if (item.source == conn.sourceId) {
-                this.data.splice(i, 1);
+              this.data.splice(i, 1);
             }
-            });
-            let node = document.getElementById(conn.sourceId);
-            this.jsPlumb.removeAllEndpoints(node);
-            sessionStorage.setItem("LineData", JSON.stringify(this.data));
-            this.$set(this.curQue, "Bookanswer", JSON.stringify(this.data));
-          }
+          });
+          let node = document.getElementById(conn.sourceId);
+          this.jsPlumb.removeAllEndpoints(node);
+          sessionStorage.setItem("LineData", JSON.stringify(this.data));
+          this.$set(this.curQue, "Bookanswer", JSON.stringify(this.data));
+        }
       });
 
       //连线时触发
       this.jsPlumb.bind("connection", (conn, originalEvent) => {
-          if(!this.TaskModel||this.TaskModel!='ANSWER'){
-            let fig = false;
-            this.data.forEach((item) => {
-                if (item.source == conn.sourceId && item.target == conn.targetId) {
-                    fig = true;
-                }
-            });
-            if (!fig) {
-                this.data.push({
-                    source: conn.sourceId,
-                    target: conn.targetId,
-                });
-                sessionStorage.setItem("LineData", JSON.stringify(this.data));
-                this.$set(this.curQue, "Bookanswer", JSON.stringify(this.data));
+        if (!this.TaskModel || this.TaskModel != "ANSWER") {
+          let fig = false;
+          this.data.forEach(item => {
+            if (item.source == conn.sourceId && item.target == conn.targetId) {
+              fig = true;
             }
+          });
+          if (!fig) {
+            this.data.push({
+              source: conn.sourceId,
+              target: conn.targetId
+            });
+            sessionStorage.setItem("LineData", JSON.stringify(this.data));
+            this.$set(this.curQue, "Bookanswer", JSON.stringify(this.data));
           }
+        }
       });
 
       //右键触发
@@ -353,13 +373,13 @@ export default {
         ins.makeSource(elem, {
           anchor: [1, 0.5, 0.5, 0.5], // 左 上 右 下  数字我调不太准确 可改成left right
           allowLoopback: false, //允许回连
-          maxConnections: 1, //最大连接数（-1表示不限制）
+          maxConnections: 1 //最大连接数（-1表示不限制）
         });
       } else {
         ins.makeTarget(elem, {
           anchor: [0, 0.5, 0, 0],
           allowLoopback: false,
-          maxConnections: 1,
+          maxConnections: 1
         });
       }
     },
@@ -371,15 +391,36 @@ export default {
       this.jsPlumb.setDraggable(source, false); // 是否支持拖拽
       this.jsPlumb.setDraggable(target, false); // 是否支持拖拽
     },
+    conImageload() {
+      this.lodimgnumber++;
+      let _this = this;
+      if (_this.lodimgnumber == _this.allimgnumber) {
+        _this.curQue.option.forEach((item, index) => {
+          for (let i = 0; i < this.curQue.con.length; i++) {
+            let nodeleft = document.getElementsByClassName(
+              `left${i + this.number}`
+            )[0];
+            let noderight = document.getElementsByClassName(
+              `right${index + this.number}`
+            )[0];
+            if (nodeleft.offsetHeight > noderight.offsetHeight) {
+              noderight.style.height = nodeleft.offsetHeight + "px";
+            } else {
+              nodeleft.style.height = noderight.offsetHeight + "px";
+            }
+          }
+        });
+      }
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    let sData = null
+    let sData = null;
     if (!this.curQue.Bookanswer) {
-        // sData = JSON.parse(sessionStorage.getItem("LineData"));
-        sData = []
-    }else{
-        sData = JSON.parse(this.curQue.Bookanswer)
+      // sData = JSON.parse(sessionStorage.getItem("LineData"));
+      sData = [];
+    } else {
+      sData = JSON.parse(this.curQue.Bookanswer);
     }
     this.data = [];
     if (sData) {
@@ -387,35 +428,43 @@ export default {
     }
     this.curQue.con.forEach((item, i) => {
       item.nodeId = "left_" + i;
+      if (item.img_list.length > 0) {
+        this.allimgnumber++;
+      }
     });
     this.curQue.option.forEach((item, i) => {
       item.nodeId = "right_" + i;
+      if (item.img_list.length > 0) {
+        this.allimgnumber++;
+      }
     });
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.showPlumb();
     // 根据记录自动连起来
-    for (let i = 0; i < this.curQue.con.length; i++) {
-      let nodeleft = document.getElementsByClassName(`left${i}`)[0];
-      let noderight = document.getElementsByClassName(`right${i}`)[0];
-      if (nodeleft && noderight) {
-        console.log(nodeleft);
-        console.log(noderight);
-        if (nodeleft.offsetHeight > noderight.offsetHeight) {
-          noderight.style.height = nodeleft.offsetHeight + "px";
-        } else {
-          nodeleft.style.height = noderight.offsetHeight + "px";
+    if (this.allimgnumber == 0) {
+      for (let i = 0; i < this.curQue.con.length; i++) {
+        let nodeleft = document.getElementsByClassName(`left${i}`)[0];
+        let noderight = document.getElementsByClassName(`right${i}`)[0];
+        if (nodeleft && noderight) {
+          console.log(nodeleft);
+          console.log(noderight);
+          if (nodeleft.offsetHeight > noderight.offsetHeight) {
+            noderight.style.height = nodeleft.offsetHeight + "px";
+          } else {
+            nodeleft.style.height = noderight.offsetHeight + "px";
+          }
         }
       }
     }
     setTimeout(() => {
       if (this.data.length > 0) {
-          console.log(this.data)
-        this.data.forEach((item) => {
+        console.log(this.data);
+        this.data.forEach(item => {
           this.jsPlumb.connect({
             source: item.source,
-            target: item.target,
+            target: item.target
           });
         });
       }
@@ -446,7 +495,7 @@ export default {
   //生命周期-销毁完成
   destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
+  activated() {}
 };
 </script>
 <style lang="scss" scoped>
@@ -521,7 +570,7 @@ export default {
           span {
             width: 24px;
             height: 24px;
-            font-family: 'robot';
+            font-family: "robot";
             font-style: normal;
             font-weight: normal;
             font-size: 16px;
@@ -564,7 +613,7 @@ export default {
           > span {
             width: 24px;
             height: 24px;
-            font-family: 'robot';
+            font-family: "robot";
             font-style: normal;
             font-weight: normal;
             font-size: 16px;
@@ -603,10 +652,10 @@ export default {
   .fuwei {
     margin-top: 16px;
     height: 40px;
-    &.notAllow{
-        >div{
-            cursor: not-allowed;
-        }
+    &.notAllow {
+      > div {
+        cursor: not-allowed;
+      }
     }
     > div {
       float: right;