学前教育评价

zhongshujie

2025-02-14 bf4e120616f481588f68f95941527c2eca19cb77

 src/components/dragQuestion/index.vue

@@ -1,10 +1,16 @@
<template>
  <div class="drag-box" :style="{ borderColor: bcColor }">
    <div class="title-box">
      <p class="text"><span class="hs1">◇</span>{{ titileText }}</p>
      <span class="svg-btn t0">
        <el-tooltip class="item" effect="dark" content="请拖拽答案到括号里吧" placement="top-start">
          <svg
      <p class="text rhombusFather" style="text-indent: 2em !important">
        <span class="hs1 rhombus">◇</span>{{ titileText }}
      </p>
      <span
        class="svg-btn t0"
        @mouseenter="mouseenterTitle"
        @mouseleave="mouseleaveTitle"
      >
        <p class="p-title" v-if="ishowTitle">请拖拽答案到括号里吧</p>
        <svg
          t="1719309984490"
          class="icon"
          viewBox="0 0 1024 1024"
@@ -20,8 +26,6 @@
            p-id="6317"
          ></path>
        </svg>
    </el-tooltip>

      </span>
    </div>
    <div
@@ -279,6 +283,7 @@
      spaceList: [],
      submitState: false,
      isLift: false,
      ishowTitle: false,
    };
  },
  mounted() {},
@@ -302,6 +307,11 @@
    },
    // 鼠标移动
    mousemove(e) {
      if (this.isLift) {
        this.moveDom.style.position = "";
        this.moveDom.style.left = "0px";
        this.moveDom.style.top = "0px";
      }
      if (!this.moveDom) return false;
      this.moveDom.style.position = "absolute";
      // 限制在此题范围内拖动
@@ -310,6 +320,7 @@
        const moveY = e.y - this.parentY + 40;
        this.moveDom.style.left = moveX + "px";
        this.moveDom.style.top = moveY + "px";
        this.moveDom.style.zIndex = "99999999";
        // 如果还有有空格
        if (this.spaceList.length) {
          for (let index = 0; index < this.spaceList.length; index++) {
@@ -491,6 +502,14 @@
      }
      return flag;
    },
    mouseenterTitle() {
      this.ishowTitle = true;
      console.log(this.ishowTitle);
    },
    mouseleaveTitle() {
      this.ishowTitle = false;
      console.log(this.ishowTitle);
    },
  },
};
</script>
@@ -555,7 +574,9 @@
  width: 100%;
}
.svg-btn {
  position: relative;
  margin-left: 5px;
  max-height: 20px;
  cursor: pointer;
  display: flex;
  padding: 3px;
@@ -568,12 +589,22 @@
    background-color: #fff;
  }
}
.p-title {
  text-indent: 0 !important;
  position: absolute;
  top: -33px;
  background-color: #8fae34;
  padding: 0 4px;
  white-space: nowrap;
  border-radius: 4px;
  color: #fff;
}
.title-box {
  display: flex;
  margin-bottom: 20px;
  p {
    margin: 0;
    text-indent: 2em !important;
    text-indent: 2em;
  }
}
/** 解析 */