{"id":9044,"date":"2023-01-16T11:38:56","date_gmt":"2023-01-16T03:38:56","guid":{"rendered":"https:\/\/sdeno.com\/?p=9044"},"modified":"2023-01-16T11:40:23","modified_gmt":"2023-01-16T03:40:23","slug":"vue%e7%94%b5%e5%ad%90%e7%ad%be%e5%90%8d%e7%bb%84%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=9044","title":{"rendered":"vue\u7535\u5b50\u7b7e\u540d\u7ec4\u4ef6"},"content":{"rendered":"

\u9002\u7528vue2\uff0cvue3<\/p>\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/sdeno.com\/wp-content\/uploads\/2023\/01\/qianming.png\"<\/figure>\n

\u8c03\u7528\uff1a<\/p>\n

<sign @onContent=\"getimg\"><\/sign>\r\n\r\n\r\nimport sign from \"..\/..\/components\/sign\";\r\n\r\nexport default {\r\n   components:{sign},\r\n   methods:{\r\n       getimg(e){\r\n         console.log(e) \/\/base64\r\n       }\r\n   }\r\n}\r\n\r\n\r\n\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n
\u7ec4\u4ef6\uff1a<\/p>\n
<template>\r\n  <div class=\"signatureBox\">\r\n    <div ref=\"canvasHW\" class=\"canvasBox\">\r\n      <canvas ref=\"canvasF\"\r\n              @touchstart=\"touchStart\"\r\n              @touchmove=\"touchMove\"\r\n              @touchend=\"touchEnd\"\r\n              @mousedown=\"mouseDown\"\r\n              @mousemove=\"mouseMove\"\r\n              @mouseup=\"mouseUp\">\r\n      <\/canvas>\r\n    <\/div>\r\n    <div class=\"signature-btnArea\">\r\n      <el-button class=\"btn\" type=\"info\" @click.native.prevent=\"handleGoBack()\">\u8fd4\u56de<\/el-button>\r\n      <el-button class=\"btn\" type=\"info\" @click.native.prevent=\"handleOverwrite()\">\u91cd\u7b7e<\/el-button>\r\n      <el-button class=\"btn\" type=\"info\" @click.native.prevent=\"handleSubmit()\">\u786e\u8ba4<\/el-button>\r\n    <\/div>\r\n  <\/div>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'ESignature',\r\n  data() {\r\n    return {\r\n      points: [],\r\n      canvasTxt: null,\r\n      stage_info: [],\r\n      startX: 0,\r\n      startY: 0,\r\n      moveY: 0,\r\n      moveX: 0,\r\n      isDown: false,\r\n      strokeStyle: '#000',\r\n      lineWidth: 2\r\n    }\r\n  },\r\n  mounted() {\r\n    this.initCanvas()\r\n  },\r\n  methods: {\r\n    \/\/ \u521d\u59cb\u5316Canvas\r\n    initCanvas() {\r\n      let canvas = this.$refs.canvasF\r\n      \/\/ \u83b7\u53d6\u753b\u5e03\u7684\u9ad8\u5ea6\r\n      canvas.height = this.$refs.canvasHW.offsetHeight - 20\r\n      \/\/ \u83b7\u53d6\u753b\u5e03\u7684\u5bbd\u5ea6\r\n      canvas.width = this.$refs.canvasHW.offsetWidth - 20\r\n      \/\/ \u521b\u5efa context \u5bf9\u8c61\r\n      this.canvasTxt = canvas.getContext('2d')\r\n      this.stage_info = canvas.getBoundingClientRect()\r\n    },\r\n    \/\/ \u9f20\u6807\u6309\u4e0b\u4e8b\u4ef6 - \u51c6\u5907\u7ed8\u753b\r\n    mouseDown(ev) {\r\n      ev = ev || event\r\n      ev.preventDefault()\r\n      if (ev) {\r\n        let obj = {\r\n          x: ev.offsetX,\r\n          y: ev.offsetY\r\n        }\r\n        this.startX = obj.x\r\n        this.startY = obj.y\r\n        this.canvasTxt.beginPath()\r\n        this.canvasTxt.moveTo(this.startX, this.startY)\r\n        this.canvasTxt.lineTo(obj.x, obj.y)\r\n        this.canvasTxt.stroke()\r\n        this.canvasTxt.closePath()\r\n        this.points.push(obj)\r\n        this.isDown = true\r\n      }\r\n    },\r\n    \/\/ \u89e6\u6478\u5f00\u59cb\u4e8b\u4ef6 - \u51c6\u5907\u7ed8\u753b\r\n    touchStart(ev) {\r\n      ev = ev || event\r\n      ev.preventDefault()\r\n      if (ev.touches.length == 1) {\r\n        let obj = {\r\n          x: ev.targetTouches[0].clientX - this.stage_info.left,\r\n          y: ev.targetTouches[0].clientY - this.stage_info.top\r\n        }\r\n        this.startX = obj.x\r\n        this.startY = obj.y\r\n        this.canvasTxt.beginPath()\r\n        this.canvasTxt.moveTo(this.startX, this.startY)\r\n        this.canvasTxt.lineTo(obj.x, obj.y)\r\n        this.canvasTxt.stroke()\r\n        this.canvasTxt.closePath()\r\n        this.points.push(obj)\r\n      }\r\n    },\r\n    \/\/ \u9f20\u6807\u79fb\u52a8\u4e8b\u4ef6 - \u5f00\u59cb\u7ed8\u753b\r\n    mouseMove(ev) {\r\n      ev = ev || event\r\n      ev.preventDefault()\r\n      if (this.isDown) {\r\n        let obj = {\r\n          x: ev.offsetX,\r\n          y: ev.offsetY\r\n        }\r\n        this.moveY = obj.y\r\n        this.moveX = obj.x\r\n        this.canvasTxt.strokeStyle = this.strokeStyle\r\n        this.canvasTxt.lineWidth = this.lineWidth\r\n        this.canvasTxt.beginPath()\r\n        this.canvasTxt.moveTo(this.startX, this.startY)\r\n        this.canvasTxt.lineTo(obj.x, obj.y)\r\n        this.canvasTxt.stroke()\r\n        this.canvasTxt.closePath()\r\n        this.startY = obj.y\r\n        this.startX = obj.x\r\n        this.points.push(obj)\r\n      }\r\n    },\r\n    \/\/ \u89e6\u6478\u79fb\u52a8\u4e8b\u4ef6 - \u5f00\u59cb\u7ed8\u753b\r\n    touchMove(ev) {\r\n      ev = ev || event\r\n      ev.preventDefault()\r\n      if (ev.touches.length == 1) {\r\n        let obj = {\r\n          x: ev.targetTouches[0].clientX - this.stage_info.left,\r\n          y: ev.targetTouches[0].clientY - this.stage_info.top\r\n        }\r\n        this.moveY = obj.y\r\n        this.moveX = obj.x\r\n        \/\/ \u8bbe\u7f6e\u7ebf\u6761\u989c\u8272\r\n        this.canvasTxt.strokeStyle = this.strokeStyle\r\n        \/\/ \u8bbe\u7f6e\u7ebf\u6761\u5bbd\u5ea6\r\n        this.canvasTxt.lineWidth = this.lineWidth\r\n        \/\/ \u7ed8\u5236\u5f00\u59cb\u8def\u5f84\r\n        this.canvasTxt.beginPath()\r\n        \/\/ \u5b9a\u4e49\u7ebf\u6761\u5f00\u59cb\u5750\u6807\r\n        this.canvasTxt.moveTo(this.startX, this.startY)\r\n        \/\/ \u5b9a\u4e49\u7ebf\u6761\u7ed3\u675f\u5750\u6807\r\n        this.canvasTxt.lineTo(obj.x, obj.y)\r\n        \/\/ \u7ed8\u5236\u7ebf\u6761\r\n        this.canvasTxt.stroke()\r\n        this.canvasTxt.closePath()\r\n        this.startY = obj.y\r\n        this.startX = obj.x\r\n        this.points.push(obj)\r\n      }\r\n    },\r\n    \/\/ \u677e\u5f00\u9f20\u6807\u4e8b\u4ef6 - \u505c\u6b62\u7ed8\u753b\r\n    mouseUp(ev) {\r\n      ev = ev || event\r\n      ev.preventDefault()\r\n      if (ev) {\r\n        let obj = {\r\n          x: ev.offsetX,\r\n          y: ev.offsetY\r\n        }\r\n        this.canvasTxt.beginPath()\r\n        this.canvasTxt.moveTo(this.startX, this.startY)\r\n        this.canvasTxt.lineTo(obj.x, obj.y)\r\n        this.canvasTxt.stroke()\r\n        this.canvasTxt.closePath()\r\n        this.points.push(obj)\r\n        this.points.push({ x: -1, y: -1 })\r\n        this.isDown = false\r\n      }\r\n    },\r\n    \/\/ \u89e6\u6478\u7ed3\u675f\u4e8b\u4ef6 - \u505c\u6b62\u7ed8\u753b\r\n    touchEnd(ev) {\r\n      ev = ev || event\r\n      ev.preventDefault()\r\n      if (ev.touches.length == 1) {\r\n        let obj = {\r\n          x: ev.targetTouches[0].clientX - this.stage_info.left,\r\n          y: ev.targetTouches[0].clientY - this.stage_info.top\r\n        }\r\n        this.canvasTxt.beginPath()\r\n        this.canvasTxt.moveTo(this.startX, this.startY)\r\n        this.canvasTxt.lineTo(obj.x, obj.y)\r\n        this.canvasTxt.stroke()\r\n        this.canvasTxt.closePath()\r\n        this.points.push(obj)\r\n        this.points.push({ x: -1, y: -1 })\r\n      }\r\n    },\r\n    \/\/ \u8fd4\u56de\r\n    handleGoBack() {\r\n      this.handleOverwrite()\r\n      this.$emit('on-back')\r\n    },\r\n    \/\/ \u91cd\u5199\r\n    handleOverwrite() {\r\n      this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)\r\n      this.points = []\r\n    },\r\n    \/\/ \u63d0\u4ea4\r\n    handleSubmit() {\r\n      if (this.points.length < 50) {\r\n        if (this.points.length == 0) {\r\n          this.$message.error('\u8bf7\u586b\u5199\u4f60\u7684\u540d\u79f0');\r\n        }\r\n        return\r\n      }\r\n      this.$emit('on-content', this.$refs.canvasF.toDataURL())\r\n      this.handleOverwrite()\r\n    }\r\n  }\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n\r\n<\/style>\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u9002\u7528vue2\uff0cvue3 \u8c03\u7528\uff1a <sign @onContent=”getimg”><\/si […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9044","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/9044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9044"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/9044\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}