fix:优化签名题
This commit is contained in:
@@ -160,7 +160,6 @@ export default {
|
||||
signaturePad.value.penColor = '#fafafa';
|
||||
signaturePad.value.velocityFilterWeight =
|
||||
signaturePad.value.velocityFilterWeight + 0.1;
|
||||
pressure;
|
||||
} else {
|
||||
signaturePad.value.minWidth = 2;
|
||||
signaturePad.value.maxWidth = 2;
|
||||
|
||||
@@ -10,30 +10,29 @@
|
||||
}
|
||||
"
|
||||
@end="onMouseup"
|
||||
@mousemove="onMousemove"
|
||||
@mouseup="onMouseup"
|
||||
@mouseleave="onMouselever"
|
||||
@begin="onMousedown"
|
||||
></VueSignature>
|
||||
<div
|
||||
class="vue-signature-btn"
|
||||
v-if="showBtn && !disabled"
|
||||
@mousemove="onMousemove"
|
||||
@mouseleave="onMouselever"
|
||||
v-if="!disabled"
|
||||
:class="{
|
||||
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) {
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user