Skip to content

S
ShanghaiGongwei
Commit f9ef10bf by nlp97
Options

签名组件流畅优化

parent 576cb111
Showing with 56 additions and 237 deletions
package-lock.json
......@@ -17,6 +17,7 @@
"postcss": "^7.0.27",
"postcss-pxtorem": "^5.1.1",
"sessionstorage": "^0.1.0",
"signature_pad": "^4.0.3",
"vant": "^2.12.45",
"vue": "^2.6.11",
"vue-wechat-title": "^2.0.5"
......@@ -12349,6 +12350,11 @@
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
"dev": true
},
"node_modules/signature_pad": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-4.0.3.tgz",
"integrity": "sha512-x2syd3fa/kSrAfgyXDp8B86MpcNXZfVHqHyKQ/XXMazN5wcmLNt+jfjQBxRqfw4XkXJ4AeJ/x+B69+mMCYyPrA=="
},
"node_modules/simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
......@@ -25299,6 +25305,11 @@
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
"dev": true
},
"signature_pad": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-4.0.3.tgz",
"integrity": "sha512-x2syd3fa/kSrAfgyXDp8B86MpcNXZfVHqHyKQ/XXMazN5wcmLNt+jfjQBxRqfw4XkXJ4AeJ/x+B69+mMCYyPrA=="
},
"simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
......
package.json
......@@ -17,6 +17,7 @@
"postcss": "^7.0.27",
"postcss-pxtorem": "^5.1.1",
"sessionstorage": "^0.1.0",
"signature_pad": "^4.0.3",
"vant": "^2.12.45",
"vue": "^2.6.11",
"vue-wechat-title": "^2.0.5"
......
src/components/alert.vue
......@@ -2,7 +2,7 @@
* @Author: ninglupeng
* @Date: 2022-03-19 10:27:33
* @LastEditors: ninglupeng
* @LastEditTime: 2022-03-19 14:09:01
* @LastEditTime: 2022-03-19 20:48:01
* @Description:
-->
<template>
......@@ -11,31 +11,34 @@
<strong class="signHandleTitle">{{ title }}</strong>
</div>
<div class="signHandle_bd">
<div id="canvas" ref="canvas"></div>
<canvas class="xhy-canvas" />
</div>
<div class="signHandle_ft">
<van-button
id="saveCanvas"
native-type="button"
block
ref="saveCanvas"
class="saveCanvas"
type="info"
size="mini"
@click="save()"
>保存</van-button
>
<van-button
id="clearCanvas"
block
class="clearCanvas"
ref="clearCanvas"
type="warning"
size="mini"
native-type="button"
@click="againSignature"
>清除</van-button
>
<van-button
id="Cancel"
native-type="button"
block
class="Cancel"
ref="Cancel"
type="default"
size="mini"
......@@ -46,6 +49,8 @@
</div>
</template>
<script>
import SignaturePad from "signature_pad";
export default {
name: "",
props: {
......@@ -55,86 +60,33 @@ export default {
},
data() {
return {
signSrc: "",
signaturePad: null, // 存放竖屏SignaturePad对象
};
},
mounted() {
this.lineCanvas({
el: this.$refs.canvas, //绘制canvas的父级div
clearEl: this.$refs.clearCanvas, //清除按钮
saveEl: this.$refs.saveCanvas, //保存按钮
});
this.init();
},
methods: {
lineCanvas(obj) {
this.linewidth = 2;
this.color = "#000000";
this.background = "#ffffff";
for (var i in obj) {
this[i] = obj[i];
init() {
if (!this.signaturePad) {
let canvas = document.querySelector(".xhy-canvas");
this.signaturePad = new SignaturePad(canvas, {
penColor: "black", //笔刷颜色
minWidth: 1, //最小宽度
});
this.signaturePad.onEnd = () => {
this.$emit("receive", this.signaturePad.toDataURL()); //通知父组件改变。
};
canvas.height = document.body.clientHeight - 100;
canvas.width = document.body.clientWidth;
}
this.canvas = document.createElement("canvas");
this.el.appendChild(this.canvas);
this.cxt = this.canvas.getContext("2d");
this.canvas.width = this.el.clientWidth;
this.canvas.height = this.el.clientHeight;
this.cxt.fillStyle = this.background;
this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
this.cxt.strokeStyle = this.color;
this.cxt.lineWidth = this.linewidth;
this.cxt.lineCap = "round";
//开始绘制
this.canvas.addEventListener(
"touchstart",
function(e) {
this.cxt.beginPath();
this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}.bind(this),
false
);
//绘制中
this.canvas.addEventListener(
"touchmove",
function(e) {
this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
this.cxt.stroke();
}.bind(this),
false
);
//结束绘制
// this.canvas.addEventListener(
// "touchend",
// function() {
// this.cxt.closePath();
// let imgBase64 = this.canvas.toDataURL();
// console.log(imgBase64);
// this.signSrc = imgBase64;
// }.bind(this),
// false
// );
//清除画布
this.clearEl.addEventListener(
"click",
function() {
this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
}.bind(this),
false
);
//保存图片，直接转base64
this.saveEl.addEventListener(
"click",
function() {
let imgBase64 = this.canvas.toDataURL();
// console.log(imgBase64);
this.signSrc = imgBase64;
},
againSignature() {
this.signaturePad.clear();
},
this.$emit("onCancel", this.signSrc);
this.$notify({ type: "success", message: "签名保存成功" });
}.bind(this),
false
);
save() {
this.$emit("onCancel", this.signaturePad.toDataURL());
},
onCancel() {
this.$emit("onCancel");
......@@ -169,18 +121,6 @@ export default {
word-wrap: break-word;
word-break: break-all;
color: #4a4a4a;
&:first-child {
padding: 2.7em 20px 1.7em;
color: #353535;
}
#canvas {
width: 100%;
height: 90vh;
position: relative;
canvas {
display: block;
}
}
}
.signHandle_ft {
......@@ -192,19 +132,19 @@ export default {
display: flex;
flex-direction: row;
#clearCanvas {
padding-bottom: 20px;
.clearCanvas {
border: 1px solid #dedede;
z-index: 1;
height: 40px;
}
#saveCanvas {
.saveCanvas {
text-align: center;
border: 1px solid #dedede;
z-index: 1;
height: 40px;
}
#Cancel {
.Cancel {
text-align: center;
border: 1px solid #dedede;
z-index: 1;
......
src/components/index.vue
......@@ -2,7 +2,7 @@
* @Author: ninglupeng
* @Date: 2020-11-24 16:18:58
* @LastEditors: ninglupeng
* @LastEditTime: 2022-03-19 18:03:50
* @LastEditTime: 2022-03-19 20:37:01
* @Description:
-->
<template>
......@@ -60,8 +60,6 @@ import page6 from "./page6.vue";
import page7 from "./page7.vue";
import leaveHospital from "./leaveHospital.vue";
import signHandleVue from "./signHandle.vue";
export default {
inject: ["setLoading", "reload"],
name: "index",
......@@ -238,7 +236,7 @@ export default {
page5,
page6,
page7,
signHandleVue,
leaveHospital,
},
};
......
src/components/page3.vue
......@@ -2,7 +2,7 @@
* @Author: ninglupeng
* @Date: 2020-11-24 16:18:58
* @LastEditors: ninglupeng
* @LastEditTime: 2022-03-19 17:07:10
* @LastEditTime: 2022-03-19 20:37:13
* @Description:
-->
<template>
......@@ -91,20 +91,16 @@
</van-popup>
<jlPopup title="签名" v-if="showSignHandleVue" @onCancel="onCancel">
</jlPopup>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import { formatDate } from "../utils/common.js";
import signHandleVue from "./signHandle.vue";
import jlPopup from "./alert.vue";
export default {
components: {
signHandleVue,
jlPopup,
},
name: "page3",
......@@ -125,7 +121,6 @@ export default {
mounted() {},
methods: {
onCancel(val) {
// console.log(val);
this.agreementSign = val;
this.showSignHandleVue = false;
},
......
src/components/signHandle.vue deleted 100644 → 0
<template>
<div>
<div id="canvas" ref="canvas"></div>
<p id="clearCanvas" ref="clearCanvas">清除</p>
<p id="saveCanvas" ref="saveCanvas">保存</p>
<!-- <div class="mySign" v-show="isSign">
<img :src="signSrc" alt="" />
</div> -->
</div>
</template>
<script>
export default {
data() {
return {
isSign: false,
signSrc: "",
};
},
created() {},
mounted() {
this.lineCanvas({
el: this.$refs.canvas, //绘制canvas的父级div
clearEl: this.$refs.clearCanvas, //清除按钮
saveEl: this.$refs.saveCanvas, //保存按钮
});
},
methods: {
lineCanvas(obj) {
this.linewidth = 2;
this.color = "#000000";
this.background = "#ffffff";
for (var i in obj) {
this[i] = obj[i];
}
this.canvas = document.createElement("canvas");
this.el.appendChild(this.canvas);
this.cxt = this.canvas.getContext("2d");
this.canvas.width = this.el.clientWidth;
this.canvas.height = this.el.clientHeight;
this.cxt.fillStyle = this.background;
this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
this.cxt.strokeStyle = this.color;
this.cxt.lineWidth = this.linewidth;
this.cxt.lineCap = "round";
//开始绘制
this.canvas.addEventListener(
"touchstart",
function(e) {
this.cxt.beginPath();
this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}.bind(this),
false
);
//绘制中
this.canvas.addEventListener(
"touchmove",
function(e) {
this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
this.cxt.stroke();
}.bind(this),
false
);
//结束绘制
// this.canvas.addEventListener(
// "touchend",
// function() {
// this.cxt.closePath();
// let imgBase64 = this.canvas.toDataURL();
// console.log(imgBase64);
// this.signSrc = imgBase64;
// this.isSign = true;
// }.bind(this),
// false
// );
//清除画布
this.clearEl.addEventListener(
"click",
function() {
this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
}.bind(this),
false
);
//保存图片，直接转base64
this.saveEl.addEventListener(
"click",
function() {
let imgBase64 = this.canvas.toDataURL();
console.log(imgBase64);
this.signSrc = imgBase64;
this.isSign = true;
}.bind(this),
false
);
},
},
};
</script>
<style scoped lang="scss">
#canvas {
width: 100%;
height: calc(80vh - 40px);
position: relative;
canvas {
display: block;
}
}
#clearCanvas {
width: 50%;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
border: 1px solid #dedede;
z-index: 1;
}
#saveCanvas {
width: 50%;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid #dedede;
z-index: 1;
}
</style>
src/store/modules/user.js
......@@ -2,7 +2,7 @@
* @Author: ninglupeng
* @Date: 2022-03-17 15:06:50
* @LastEditors: ninglupeng
* @LastEditTime: 2022-03-19 17:49:47
* @LastEditTime: 2022-03-19 19:37:12
* @Description:
*/
import http from '@/http/index'
......@@ -13,7 +13,7 @@ const state = {
token: '',
name: '',
userInfo: {},
page: 1,
page: 3,
}
const mutations = {
......
yarn.lock
......@@ -7565,6 +7565,11 @@
"resolved" "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz"
"version" "3.0.3"
"signature_pad@^4.0.3":
"integrity" "sha512-x2syd3fa/kSrAfgyXDp8B86MpcNXZfVHqHyKQ/XXMazN5wcmLNt+jfjQBxRqfw4XkXJ4AeJ/x+B69+mMCYyPrA=="
"resolved" "https://registry.npmjs.org/signature_pad/-/signature_pad-4.0.3.tgz"
"version" "4.0.3"
"simple-swizzle@^0.2.2":
"integrity" "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo="
"resolved" "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment