<template>
<div class="signatureBox">
<div class="signature-title">签名</div>
<div ref="canvasHW" class="canvasBox">
<canvas
ref="canvasF"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
@mousedown="mouseDown"
@mousemove="mouseMove"
@mouseup="mouseUp"
></canvas>
</div>
<div class="signature-btn">
<van-button class="btn" type="info" @click.native.prevent="handleGoBack()">返回</van-button>
<van-button class="btn" type="info" @click.native.prevent="handleOverwrite()">重签</van-button>
<van-button class="btn" type="info" @click.native.prevent="handleSubmit()">确认</van-button>
</div>
</div>
</template>
<script>
export default {
name: "Signature",
data() {
return {
points: [],
canvasTxt: null,
stage_info: [],
startX: 0,
startY: 0,
moveY: 0,
moveX: 0,
isDown: false,
strokeStyle: "#000",
lineWidth: 2
};
},
mounted() {
this.initCanvas();
},
methods: {
initCanvas() {
let canvas = this.$refs.canvasF;
// 获取画布的高度
canvas.height = this.$refs.canvasHW.offsetHeight - 20;
// 获取画布的宽度
canvas.width = this.$refs.canvasHW.offsetWidth - 20;
// 创建 context 对象
this.canvasTxt = canvas.getContext("2d");
this.stage_info = canvas.getBoundingClientRect(
Vue电子签名
最新推荐文章于 2024-07-23 10:04:48 发布
本文介绍了如何在Vue.js项目中实现电子签名的功能,包括使用HTML5 Canvas API进行绘图,保存和加载签名图片,以及将签名数据集成到Vue组件中,提升用户体验。
摘要由CSDN通过智能技术生成