网站设计与管理的软件,提高网站安全性,网站建设注意,网站制作优化全包新开发的业务涉及到签字功能#xff0c;由于是动态的表单#xff0c;无法确定它会出现在哪里#xff0c;不得已封装模块。 其中涉及到一个难点就是this的指向性问题#xff0c; 第二个是微信小程序写法#xff0c; 我这个写法里用了u-view的写法#xff0c;可以自己修改组…新开发的业务涉及到签字功能由于是动态的表单无法确定它会出现在哪里不得已封装模块。 其中涉及到一个难点就是this的指向性问题 第二个是微信小程序写法 我这个写法里用了u-view的写法可以自己修改组件
首先是封装的内容
1、props接收父级传过来的参数这些数据是因为我是动态多级表单、可按需传值 2、imageUpload是我上传后台的地址。可自己修改或者自己封装参数 3、this.canvasadd()是定义画布一定要放在mounted(),放在其他位置会出现this指向性报错或者返回位置不一致问题。
template!-- 签名组件 --view classcontainerview classfatherWrite clickshowWritediv classsonWritetext v-ifwrite点击签名/text/divimage :srcvalue v-modelimage styleborder:1px solid #ccc;width: 100%; //viewuni-popup refpopup background-color#fff h1 styletext-align: center;margin: 20rpx;签字板/h1uni-row classdemo-uni-row :gutter10 stylepadding: 20rpx; uni-col :span8u-button text取消 colorlinear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))taphandleCancel/u-button/uni-coluni-col :span8u-button text重写 colorlinear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))taphandleReset/u-button/uni-coluni-col :span8u-button text确认 colorlinear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))taphandleConfirm/u-button/uni-col/uni-rowview classsign-boxcanvas classmycanvas canvas-idmycanvas touchstarttouchstart touchmovetouchmovetouchendtouchend/canvas/view/uni-popup/view
/template
scriptvar x 20;var y 20;var tempPoint []; //用来存放当前画纸上的轨迹点var id 0;var type ;let that;let canvasw;let canvash;import {imageUpload} from /api/system/applet.js //export default {name: Handwriting,props: {image: String, //判断当前是否有照片writeIndex: Number, //下标writeChildrenIndex: Number, //子级下标},data() {return {ctx: , //绘图图像points: [], //路径点集合,width: 0,height: 0,write: true,value: this.image,};},mounted() {this.canvasadd()},methods: {canvasadd() {this.ctx uni.createCanvasContext(mycanvas, this); //创建绘图对象//设置画笔样式this.ctx.lineWidth 4;this.ctx.lineCap round;this.ctx.lineJoin round;that this;uni.getSystemInfo({success: function(res) {that.width res.windowWidth;that.height res.windowHeight;}});},//签名填写showWrite() {this.canvasadd()if (this.image null || this.image ) {that.$refs.popup.open(bottom)} else {uni.showModal({content: 是否重写签名,cancelText: 取消,confirmText: 确定,success: function(res) {if (res.confirm) {that.$refs.popup.open(bottom)} else {that.$refs.popup.close()}}})}},//触摸开始获取到起点touchstart: function(e) {let startX e.changedTouches[0].x;let startY e.changedTouches[0].y;let startPoint {X: startX,Y: startY};/* **************************************************#由于uni对canvas的实现有所不同这里需要把起点存起来* **************************************************/this.points.push(startPoint);//每次触摸开始开启新的路径this.ctx.beginPath();},//触摸移动获取到路径点touchmove: function(e) {let moveX e.changedTouches[0].x;let moveY e.changedTouches[0].y;let movePoint {X: moveX,Y: moveY};this.points.push(movePoint); //存点let len this.points.length;if (len 2) {this.draw(); //绘制路径}tempPoint.push(movePoint);},// 触摸结束将未绘制的点清空防止对后续路径产生干扰touchend: function() {this.points [];},/* *********************************************** # 绘制笔迹# 1.为保证笔迹实时显示必须在移动的同时绘制笔迹# 2.为保证笔迹连续每次从路径集合中区两个点作为起点moveTo和终点(lineTo)# 3.将上一次的终点作为下一次绘制的起点即清除第一个点************************************************ */draw: function() {let point1 this.points[0];let point2 this.points[1];this.points.shift();this.ctx.lineWidth 4;this.ctx.lineCap round;this.ctx.lineJoin round;this.ctx.moveTo(point1.X, point1.Y);this.ctx.lineTo(point2.X, point2.Y);this.ctx.stroke();this.ctx.draw(true);},//取消绘制handleCancel() {this.handleReset()that.$refs.popup.close() },//清空画布handleReset: function() {this.ctx.clearRect(0, 0, that.width, that.height);this.ctx.draw(true);tempPoint [];},//将签名笔迹上传到服务器并将返回来的地址存到本地handleConfirm: function() {if (tempPoint.length 0) {that.$modal.msgError(请先签名)return;} else {setTimeout(() {uni.canvasToTempFilePath({canvasId: mycanvas,destWidth: that.width,destHeight: that.height,fileType: png,quality: 1, //图片质量success: function(res) {let tempPath res.tempFilePath;//图片上传拿urllet data {filePath: tempPath,formData: {isSystem: true}} imageUpload(data).then(response {//向上一个页面传参that.value response.data.urlthat.handleReset()if (that.value) {that.write false}that.$emit(writeValue, {value: that.value,index: that.writeIndex,childrenIndex: that.writeChildrenIndex}) //返回父级数组下标that.$refs.popup.close()})}}, this);}, 500)}}}};
/scriptstyle langscss scoped.sign-box {width: 100%;height: 100%;margin: auto;}.demo-uni-row {margin: 20rpx 20rpx;padding: 20rpx;}.mycanvas {margin: 20rpx;width: auto;height: 60vh;border: 1px solid #c6ceff;background-color: #ececec;}.canvsborder {position: fixed;}.fatherWrite {position: relative;.sonWrite {position: absolute;color: #ccc;top: 50%;left: 50%;transform: translate(-50%, -50%);}}
/style页面引用
template
view
//这里简单放置具体使用按照规范填写
//普通写法
uni-forms-item :labelindex1、item.label required :rulesitem.rules :name[dynamicLists,index,images] writeName :imageitem.images :valueitem.images :writeIndexindexwriteValuewriteValue/writeName
/uni-forms-item
//多级动态提交
uni-forms-item :labelindex1.ide1、ite.itemName required:rules[{required: true,errorMessage: 请填写}]:name[dynamicLists,index,children,ide,images]writeName :imagedynamicFormData.dynamicLists[index].children[ide].images:valuedynamicFormData.dynamicLists[index].children[ide].images:writeIndexindex :writeChildrenIndexidewriteValuewriteValueChildren/writeName
/uni-forms-item
/view
/template
import writeName from /pages/public/Handwriting/Handwriting.vue
export default {components: {writeName},methods:{writeValueChildren(val) {this.dynamicFormData.dynamicLists[val.index].children[val.childrenIndex].images val.value},writeValue(val) {this.dynamicFormData.dynamicLists[val.index].images val.value},}
} 以上是我的写法不足之处还望指出
