fix:优化签名题

src/components/VueSignature.vue

@@ -159,8 +159,7 @@ export default {
           signaturePad.value.maxWidth = 212;
           signaturePad.value.penColor = '#fafafa';
           signaturePad.value.velocityFilterWeight =
-            signaturePad.value.velocityFilterWeight + 0.1;
+          signaturePad.value.velocityFilterWeight + 0.1;
-          pressure;
         } else {
           signaturePad.value.minWidth = 2;
           signaturePad.value.maxWidth = 2;

src/views/planetDesign/Design/components/Signature.vue

@@ -10,30 +10,29 @@
         }
       "
       @end="onMouseup"
-      @mousemove="onMousemove"
       @mouseup="onMouseup"
-      @mouseleave="onMouselever"
       @begin="onMousedown"
     ></VueSignature>
     <div
       class="vue-signature-btn"
-      v-if="showBtn && !disabled"
+      v-if="!disabled"
-      @mousemove="onMousemove"
+      :class="{
-      @mouseleave="onMouselever"
+        hidebtn:!showBtn
+      }"
     >
-      <span @click="clear">
+      <span @mousedown.stop.prevent="clear"  @touchstart.stop.prevent="clear">
         <i class="iconfont icon-qingkong1"></i>
         清空
       </span>
-      <span class="lb" @click="back">
+      <span class="lb" @mousedown.stop.prevent="back"  @touchstart.stop.prevent="back">
         <i class="iconfont icon-chexiao"></i>
         撤销</span
       >
-      <span class="lb" @click="pen">
+      <span class="lb" @mousedown.stop.prevent="pen"  @touchstart.stop.prevent="pen">
         <i class="iconfont" :class="isPen ? 'icon-huabi' : 'icon-xiangpi'"></i>
         {{ isPen ? '画笔' : '橡皮' }}
       </span>
-      <span class="lb save" @click="save" :disabled="disabled">
+      <span class="lb save" @mousedown.stop.prevent="save"  @touchstart.stop.prevent="save" :disabled="disabled">
         <i class="iconfont icon-wancheng"></i>
 
         完成并上传</span
@@ -90,29 +89,11 @@ export default {
     // });
 
     const onMousedown = (e) => {
-      isMouseDown.value = true;
       showBtn.value = false;
-      e.preventDefault();
-    };
-    const onMousemove = (e) => {
-      // e.preventDefault();
-      if (!isMouseDown.value) {
-        showBtn.value = true;
-      } else {
-        showBtn.value = false;
-      }
-      //  console.log("onMousemove", e);
     };
     const onMouseup = (e) => {
       e.preventDefault();
-      if (isMouseDown.value) {
+      showBtn.value = true;
-        isMouseDown.value = false;
-        showBtn.value = true;
-      }
-    };
-    const onMouselever = (e) => {
-      e.preventDefault();
-      showBtn.value = false;
     };
     return {
       save,
@@ -123,9 +104,7 @@ export default {
       isPen,
       showBtn,
       onMousedown,
-      onMousemove,
       onMouseup,
-      onMouselever
     };
   }
 };
@@ -137,7 +116,8 @@ export default {
   width: 302px;
   height: 152px;
   .vue-signature-btn {
-    display: flex;
+   // display: flex;
+    display: none;
     width: 302px;
     height: 42px;
     background: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, #000000 100%);
@@ -164,6 +144,7 @@ export default {
     }
     .lb {
       border-left: 1px solid;
+      cursor:pointer;
     }
   }
 }
@@ -177,4 +158,11 @@ export default {
 .noPen {
   cursor: url('/ico/noPen.ico') 18 18, crosshair;
 }
+.vue-signature:hover .vue-signature-btn{
+  display:flex  !important;
+}
+.hidebtn{
+  display: none !important;
+}
+
 </style>