词汇卡片预览重叠问题，书法大师 增加图片删除功能

src/components/corpus/Strockplay.vue

@@ -1,13 +1,18 @@
 <!--  -->
 <template>
   <div class="strockplayInner" :class="className">
-    <div @click="playHanzi" class="strock-play-box" :style="{width:palyWidth,height:palyWidth}" v-if="playStorkes">
+    <div
+      @click="playHanzi"
+      class="strock-play-box"
+      :style="{ width: palyWidth, height: palyWidth }"
+      v-if="playStorkes"
+    >
       <svg-icon
         icon-class="playStorkes"
         className="playStorkes-btn"
         v-if="playStorkes"
         @click="playHanzi"
-        :style="{color:strokePlayColor,width:palyWidth,height:palyWidth}"
+        :style="{ color: strokePlayColor, width: palyWidth, height: palyWidth }"
       />
     </div>
     <div
@@ -15,18 +20,18 @@
       :id="targetDiv"
       class="character-target-div"
     >
-        <svg-icon
-            icon-class="tian"
-            className="tian-bg"
-            v-if="BoxbgType==0"
-            :style="{color:'#DEDEDE'}"
-        />
-        <svg-icon
-            icon-class="mi"
-            className="tian-bg"
-            v-if="BoxbgType==1"
-            :style="{color:'#DEDEDE'}"
-        />
+      <svg-icon
+        icon-class="tian"
+        className="tian-bg"
+        v-if="BoxbgType == 0"
+        :style="{ color: '#DEDEDE' }"
+      />
+      <svg-icon
+        icon-class="mi"
+        className="tian-bg"
+        v-if="BoxbgType == 1"
+        :style="{ color: '#DEDEDE' }"
+      />
     </div>
   </div>
 </template>
@@ -45,7 +50,7 @@ export default {
     "className",
     "strokePlayColor",
     "palyWidth",
-    "BoxbgType"
+    "BoxbgType",
   ],
   data() {
     return {
@@ -71,6 +76,10 @@ export default {
   methods: {
     initHanziwrite() {
       let _this = this;
+      let node = document.getElementById(`${_this.targetDiv}`);
+      if (node.children.length > 1) {
+        node.removeChild(node.children[1]);
+      }
       //var ren = require("hanzi-writer-data/国");
       _this.writer = HanziWriter.default.create(
         _this.targetDiv,
@@ -122,7 +131,7 @@ export default {
   margin: 0 auto;
   width: 100%; //444px
   height: 100%; //480px
-  .strock-play-box{
+  .strock-play-box {
     position: absolute;
     top: 0;
     right: 0;
@@ -132,8 +141,8 @@ export default {
 .character-target-div {
   width: 100%; //444px
   height: 100%; //480px
-//   background: #fff url("../../../../assets/NPC/chinaTianRed.png") center
-//     no-repeat;
+  //   background: #fff url("../../../../assets/NPC/chinaTianRed.png") center
+  //     no-repeat;
   background-size: 100% 100%;
   border-radius: 24px;
   display: flex;
@@ -159,9 +168,9 @@ export default {
   height: 160px;
   font-size: 28px;
 }
-.playStorkes-btn{
-    position: absolute;
-    top: 0;
-    right: 0;
+.playStorkes-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 </style>

src/components/corpus/StrockplayredlineTable.vue

@@ -85,6 +85,12 @@ export default {
   methods: {
     initHanziwrite() {
       let _this = this;
+      let node = document.getElementById(`${_this.targetDiv}`);
+      let noe2 = document.getElementById(`${_this.targetDivGray}`);
+      if (node.children.length > 0) {
+        noe2.removeChild(noe2.children[0]);
+        node.removeChild(node.children[0]);
+      }
       if (_this.Book_text == "〇") return false;
       _this.writer = null;
       //var ren = require("hanzi-writer-data/国");

src/components/corpus/Strockred.vue

@@ -11,16 +11,16 @@
         class="character-target-div"
       >
         <svg-icon
-            icon-class="tian"
-            className="tian-bg"
-            v-if="BoxbgType==0"
-            :style="{color:'#DEDEDE'}"
+          icon-class="tian"
+          className="tian-bg"
+          v-if="BoxbgType == 0"
+          :style="{ color: '#DEDEDE' }"
         />
         <svg-icon
-            icon-class="mi"
-            className="tian-bg"
-            v-if="BoxbgType==1"
-            :style="{color:'#DEDEDE'}"
+          icon-class="mi"
+          className="tian-bg"
+          v-if="BoxbgType == 1"
+          :style="{ color: '#DEDEDE' }"
         />
       </div>
     </div>
@@ -40,7 +40,7 @@ export default {
     "wordNum",
     "tianColor",
     "drawingColor",
-    "BoxbgType"
+    "BoxbgType",
   ],
   data() {
     return {
@@ -70,6 +70,8 @@ export default {
   methods: {
     initHanziwrite() {
       let _this = this;
+      let node = document.getElementById(`${_this.targetDiv}`);
+      node.removeChild(node.children[0]);
       let options = {
         charDataLoader: function (char, onComplete) {
           let MethodName = "hz_resource_manager-GetHZStrokesContent";

src/views/CalligraphyMaster/cread.vue

@@ -239,7 +239,7 @@
           <div @click="addText">
             <img src="../../assets/teacherdev/sfds-text.png" alt="" />
           </div>
-          <div>
+          <div @click="deleteImage">
             <img src="../../assets/teacherdev/sfds-delete.png" alt="" />
           </div>
           <div @click="changeluminance">
@@ -450,6 +450,13 @@ export default {
         this.imgCtx.drawImage(img, 0, 0, this.form.width, this.form.height);
       };
     },
+    // 删除上传的图片
+    deleteImage() {
+      this.fileList = [];
+      let imgCanvas = this.$refs.imgCanvas; //绘制图片的canvas
+      this.imgCtx = imgCanvas.getContext("2d");
+      this.imgCtx.clearRect(0, 0, this.form.width, this.form.height);
+    },
     handlebeforeUplaod(file) {
       if (file.size > 20 * 1024 * 1024) {
         this.$message.warning("上传文件大小不能超过20M");

src/views/wordcard/cread.vue

@@ -412,9 +412,11 @@ export default {
         }
         this.previewIndex--;
       }
+      this.$forceUpdate();
     },
     // 预览
     previewEvent() {
+      this.previewIndex = 0;
       this.isPreview = true;
     },
     // 关闭预览

src/views/wordcard/writeTable.vue

@@ -51,7 +51,8 @@
                 indexR +
                 '-' +
                 indexI +
-                type
+                type +
+                itemI.con
               "
             />
           </template>