172 lines
4.3 KiB
Vue
172 lines
4.3 KiB
Vue
<template>
|
|
<div class="signature-wrap">
|
|
<canvas id="canvas"></canvas>
|
|
<div :class="isLikelyMobile() ? 'action-buttons' : 'action-buttons pc-action-buttons'">
|
|
<button @click="clear" class="action-button-danger" type="button">清空</button>
|
|
<button @click="undo" class="action-button-warning" type="button">撤销</button>
|
|
<button @click="save" class="action-button-primary" type="button">确定</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// function a() {
|
|
// // 检查当前屏幕方向
|
|
// if (window.orientation === 0 || window.orientation === 180) {
|
|
// // 竖屏状态
|
|
// console.log("竖屏状态")
|
|
// alert("当前不支持竖屏，请将设备调整为横屏！")
|
|
// } else {
|
|
// // 横屏状态，执行禁止旋转的操作
|
|
// alert("当前不支持横屏，请将设备调整为竖屏！")
|
|
// // 可以在这里使内容固定在竖屏方向
|
|
// const innerWidth = window.innerWidth
|
|
// const innerHeight = window.innerHeight
|
|
// alert(innerHeight)
|
|
// alert(innerWidth)
|
|
// }
|
|
// }
|
|
//
|
|
// window.addEventListener("orientationchange", a)
|
|
// a()
|
|
|
|
let signature = null
|
|
module.exports = {
|
|
name: "sysSignature",
|
|
data() {
|
|
return {
|
|
content: null
|
|
}
|
|
},
|
|
methods: {
|
|
clear() {
|
|
signature.clear()
|
|
},
|
|
undo() {
|
|
signature.undo()
|
|
},
|
|
rotate() {
|
|
signature.getRotateCanvas(90)
|
|
},
|
|
isLikelyMobile() {
|
|
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
|
const isSmallScreen = window.screen.width <= 768;
|
|
const hasMobileUA = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
|
|
return hasMobileUA || (isTouchDevice && isSmallScreen);
|
|
},
|
|
save() {
|
|
if (signature.isEmpty()) {
|
|
alert("请签字后再保存")
|
|
return
|
|
}
|
|
// const png = signature.getPNG()
|
|
//旋转一下 横过来
|
|
const rotateCanvas = signature.getRotateCanvas(-90)
|
|
if (this.isLikelyMobile()) {
|
|
this.$emit("save", rotateCanvas.toDataURL())
|
|
} else {
|
|
this.$emit("save", signature.toDataURL())
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
const innerWidth = window.innerWidth
|
|
const innerHeight = window.innerHeight
|
|
|
|
const canvas = document.getElementById("canvas")
|
|
canvas.width = window.innerWidth
|
|
canvas.height = window.innerHeight
|
|
signature = new SmoothSignature(canvas, {
|
|
width: innerWidth - 30,
|
|
height: innerHeight - 30,
|
|
scale: 2,
|
|
minWidth: 4,
|
|
maxWidth: 10,
|
|
color: "#000000"
|
|
// bgColor: "#f6f6f6"
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.signature-wrap {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 15px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.signature-wrap .action {
|
|
width: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.signature-wrap .action-buttons {
|
|
white-space: nowrap;
|
|
transform: rotate(90deg);
|
|
display: flex;
|
|
column-gap: 10px;
|
|
position: fixed;
|
|
bottom: 0px;
|
|
left: 60px;
|
|
transform: rotate(90deg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 20px;
|
|
}
|
|
|
|
.signature-wrap .pc-action-buttons {
|
|
bottom: 50px;
|
|
right: 50px;
|
|
left: unset;
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.action-buttons button {
|
|
color: #ffffff;
|
|
position: relative;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
height: auto;
|
|
padding: 3px 12px;
|
|
margin: 0;
|
|
font-size: 15px;
|
|
line-height: 1.4;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: opacity 0.15s ease;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.action-button-primary {
|
|
background-color: #1677ff;
|
|
border: 1px solid #1677ff;
|
|
}
|
|
|
|
.action-button-danger {
|
|
background-color: #ff3141;
|
|
border: 1px solid #ff3141;
|
|
}
|
|
|
|
.action-button-warning {
|
|
background-color: #ff8f1f;
|
|
border: 1px solid #ff8f1f;
|
|
}
|
|
|
|
.signature-wrap canvas {
|
|
flex: 1;
|
|
border-radius: 10px;
|
|
border: 2px dashed #ccc;
|
|
}
|
|
</style>
|