优化

unknown

2024-06-17 304689614daa96595aeeeed8e46e5dfa992ef2df

 src/components/matching/matching.vue

@@ -15,7 +15,7 @@
            :key="index"
            ref="left"
            @mousedown="(e) => touchstart(e, item, index)"
            :style="{backgroundColor:bc}"
            :style="{backgroundColor:primaryColor}"
          >
            {{ item.label.txt }}
          </div>
@@ -26,7 +26,7 @@
            v-for="(item, index) in rightArr"
            :key="index"
            ref="right"
            :style="{backgroundColor:bc}"
            :style="{backgroundColor:primaryColor}"
          >
            {{ item.label.txt }}
          </div>
@@ -48,9 +48,9 @@
    <!-- 按钮 -->
    <div class="btn-bottom">
      <el-button @click="submitData">提交</el-button>
      <el-button @click="saveData">保存</el-button>
      <el-button @click="redo">重做</el-button>
      <el-button @click="handleAnswer">查看答案</el-button>
      <el-button @click="saveData" :style="{borderColor:primaryColor}">保存</el-button>
      <el-button @click="redo" >重做</el-button>
      <el-button @click="handleAnswer" :style="{borderColor:primaryColor}">查看答案</el-button>
    </div>
    <!-- 解析 -->
    <ul class="show-answer" v-if="isShowAnswer">
@@ -105,7 +105,7 @@
        return [];
      },
    },
    bc:{
    primaryColor:{
      type:String,
      default:"#0bab87"
    }
@@ -181,14 +181,15 @@
    },
    // 触摸结束
    touchend(e, index) {
      console.log("抬起", e, this.checkItem);
      this.isDragging = false;
      if (this.item.showAnswer) {
        return false;
      }
      // let event = e.changedTouches[0];
      // document.elementFromPoint 重点，根据x,y坐标 取当前元素 所有能运行的逻辑 都依托于这里。
      let dom = document.elementFromPoint(e.pageX, e.pageY);
      let dom = (
        this.container ? this.container : document
      ).elementFromPoint(e.pageX, e.pageY);
      // 右边的dom是哪个
      let right = this.rightDom.find((r) => r.bom === dom);
      // 不管是哪个都清除掉 底部的线
@@ -220,12 +221,11 @@
        .filter((r) => r.right !== undefined);
      this.$emit("input", model);
      this.item.userChoise = model;
      console.log(JSON.stringify(model));
      // console.log(JSON.stringify(model));
    },
    // 触摸开始
    touchstart(e, item, index) {
      this.isDragging = true;
      console.log("按下", e);
      this.checkItem = item;
      this.checkItemIndex = index;
      e.stopPropagation();
@@ -254,7 +254,6 @@
      if (this.item.showAnswer) {
        return false;
      }
      // console.log('移动',e);
      this.checkItem.line[2] = e.pageX;
      this.checkItem.line[3] =
        e.pageY - this.$refs.connect.getBoundingClientRect().y + this.scrollTop;
@@ -282,8 +281,8 @@
      canvasA.lineWidth = 2;
      for (let i = 0; i < this.leftArr.length; i++) {
        const line = this.leftArr[i].line;
        console.log(line);
        console.log(this.leftArr[i]);
        // console.log(line);
        // console.log(this.leftArr[i]);
        if (line.length) {
          canvasA.moveTo(line[0], line[1]);
          canvasA.lineTo(line[2], line[3]);
@@ -342,18 +341,14 @@
        });
      }
      this.isRight = this.areArraysEqual(this.item.userChoise,answerArr)
      this.item.showAnswer = true
      console.log(
        "答案",
        answerArr,
        this.item.userChoise,
        this.isRight 
      );
      this.isShowAnswer =true
    },
    // 获取当前页码
    handlePage() {
      let pageNum = null
      const element = document.getElementsByClassName("matching")[0];
      const element = (
        this.container ? this.container : document
      ).querySelector("matching");
      if (element) {
        pageNum = this.getParentWithClass(
          element,
@@ -381,7 +376,7 @@
    saveData() {
      if(this.item.userChoise.length)
      localStorage.setItem(this.config.activeBook.name + '-matching-' + this.pageNum,JSON.stringify(this.item.userChoise))
      console.log('保存成功',this.config.activeBook.name,this.pageNum);
      // console.log('保存成功',this.config.activeBook.name,this.pageNum);
    },
    // 重做
    redo() {
@@ -395,6 +390,7 @@
      }
      this.leftArr
      this.drawing()
      this.isShowAnswer = false
    }
  },
};
@@ -439,7 +435,7 @@
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      line-height: 40px;
      line-height: 24px;
      padding: 6px;
    }

@@ -474,7 +470,7 @@
}
.el-button {
  height:30px;
  padding:9px;
  padding:7px;
  min-width: 78px
}
</style>