最近做了一个公司内部电子合同签署的功能，里面要实现电子签名，觉得可以记录一下！

1、HTML部分：

<template><div class='canvas-box' ref="canvasContent"><canvas @touchstart='touchStartHandle'@touchmove='touchMoveHandle'@touchend='touchEndHandle'ref="canvasBox"@mousedown="mouseDownHandle"@mousemove="mouseMoveHandle"@mouseup="mouseUpHandle"></canvas></div><div class='btn-box'><button @click="clearHandle">清空</button><button>提交</button></div>
</template>

2、CSS部分：

.canvasBox{position: relative;top: 100px;width: 90%;margin: 0 auto;height: 200px;
}
canvas {border: 1px solid #999;box-shadow: 0px 0px 2px 1px #999;
}
.btn-box {display: flex;justify-content: space-around;font-size: 28px;
}
button {background: transparent;border: none;
}

3、JS部分：

export default {data(){return {canvasTxt:null,stage_info:[],isDown:false}},mounted(){let canvas=this.$refs.canvasBox;canvas.height = 200;canvas.width =this.$refs.canvasContent.offsetWidth;this.canvasTxt=canvas.getContext("2d");this.stage_info = canvas.getBoundingClientRect();//getBoundingClientRect() : 获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置},methods:{//电脑设备事件mouseDownHandle(ev){ev = ev || event;ev.preventDefault();let obj={x:ev.offsetX ,y:ev.offsetY,};this.canvasTxt.beginPath();this.canvasTxt.moveTo(obj.x, obj.y);this.canvasTxt.lineTo(obj.x, obj.y);this.canvasTxt.stroke();this.canvasTxt.closePath();this.isDown=true;},//移动设备事件touchStartHandle(ev){ev = ev || event;ev.preventDefault();if(ev.touches.length == 1) {let obj={x:ev.targetTouches[0].clientX - this.stage_info.left,y:ev.targetTouches[0].clientY- this.stage_info.top};this.canvasTxt.beginPath();this.canvasTxt.moveTo(obj.x, obj.y);this.canvasTxt.lineTo(obj.x, obj.y);this.canvasTxt.stroke();this.canvasTxt.closePath();}},//电脑设备事件mouseMoveHandle(ev){ev = ev || event;ev.preventDefault();if(this.isDown){let obj={x:ev.offsetX,y:ev.offsetY};this.canvasTxt.beginPath();this.canvasTxt.moveTo(obj.x, obj.y);this.canvasTxt.lineTo(obj.x, obj.y);this.canvasTxt.stroke();this.canvasTxt.closePath();}},//移动设备事件touchMoveHandle(ev){ev = ev || event;ev.preventDefault();if(ev.touches.length == 1) {let obj={x:ev.targetTouches[0].clientX - this.stage_info.left,y:ev.targetTouches[0].clientY- this.stage_info.top};this.canvasTxt.beginPath();this.canvasTxt.moveTo(obj.x, obj.y);this.canvasTxt.lineTo(obj.x, obj.y);this.canvasTxt.stroke();this.canvasTxt.closePath();}},//电脑设备事件mouseUpHandle(ev){ev = ev || event;ev.preventDefault();let obj={x:ev.offsetX,y:ev.offsetY};this.canvasTxt.beginPath();this.canvasTxt.moveTo(obj.x, obj.y);this.canvasTxt.lineTo(obj.x, obj.y);this.canvasTxt.stroke();this.canvasTxt.closePath();this.isDown=false;},//移动设备事件touchEndHandle(ev){ev = ev || event;ev.preventDefault();if(ev.touches.length == 1) {let obj={x:ev.targetTouches[0].clientX - this.stage_info.left,y:ev.targetTouches[0].clientY- this.stage_info.top};this.canvasTxt.beginPath();this.canvasTxt.moveTo(obj.x, obj.y);this.canvasTxt.lineTo(obj.x, obj.y);this.canvasTxt.stroke();}},//清空画布clearHandle(){this.canvasTxt.clearRect(0, 0, this.$refs.canvasBox.width,this.$refs.canvasBox.height);},}
}

参考文章-可点击

H5 实现电子签名功能-VUE--12301合同签署类似功能相关推荐

华为：编程实现联想输入法输入联想功能是非常实用的一个功能，请编程实现类似功能
/**************************************************************************** 输入联想问题描述: 输入联想功能是非常实用 ...
c语言联想输入法算法,华为：编程实现联想输入法输入联想功能是非常实用的一个功能，请编程实现类似功能...
/**************************************************************************** 输入联想问题描述: 输入联想功能是非常实用 ...
匹配输入华为：编程实现联想输入法输入联想功能是非常实用的一个功能，请编程实现类似功能...
首先声明,我是一个菜鸟.一下文章中出现技术误导情况盖不负责每日一道理漫漫人生路,谁都难免会遭遇各种失意或厄运.在凄风苦雨惨雾愁云的考验面前,一个强者,是不会向命运低头的.风再冷,不会永远不息:雾 ...
itextpdf5.x实现合同签署盖章预览功能
文章目录 1.背景 2.E签宝产品接入使用 3.技术选型 3.1 iText 3.2 JFreeReport 3.3 PJX 3.3 Apache FOP 3.4 gnujpdf 3.5 PDF Bo ...
2023年10大电子合同签署平台排名参考
数字经济成为推动中国国民经济高质量发展的新动能,电子签约作为企业数字化转型的降本增效.保安全的利器,应用前景广阔.为此我们研究了国内主流电子合同签署平台并做了深入分析对比,另外介绍了一些常识,希望对您 ...
html5手机上签名,h5实现电子签名
h5实现电子签名前端需要引入:jSignature.min.js ,jquery-1.9.1.min.js 前端部分写法: body内加 div id="signature"/ ...
君子签“区块链+保全链+全证据链”保障电子合同签署全程可靠可信
随着数字经济的快速发展,企业开始积极拥抱信息化.数字化转型,越来越多的合同通过互联网.电子化的形式订立,以电子合同区块链存证为代表的电子证据应用被越来越多企业所采用,更被最高法官宣认可其法律效力,成为 ...
人力资源后台管理系统之合同—— 电子签章功能
一: 先上图为敬: 二:通过上图可知,甲方需要先准备印章,账户,签署文件. 三:项目内截图: 四:通过左侧菜单可以看到合同管理菜单下,有三个子级菜单,分别是合同分类管理,合同推送,合同签章. 五:整体 ...
以电子签名形式订立的合同具有证据效力吗？
关键词电子签名 /文档签名 / 数据电文 / 中立第三方平台 / 电子认证机构主题要旨随着互联网行业的兴起,民事主体间采用电子签名形式订立合同的做法已日益普遍.根据法律规定,书面合同自当事人签字 ...

H5 实现电子签名功能-VUE--12301合同签署类似功能

1、HTML部分：

2、CSS部分：

3、JS部分：

H5 实现电子签名功能-VUE--12301合同签署类似功能相关推荐

最新文章

热门文章