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 @@ ...@@ -17,6 +17,7 @@
"postcss": "^7.0.27", "postcss": "^7.0.27",
"postcss-pxtorem": "^5.1.1", "postcss-pxtorem": "^5.1.1",
"sessionstorage": "^0.1.0", "sessionstorage": "^0.1.0",
"signature_pad": "^4.0.3",
"vant": "^2.12.45", "vant": "^2.12.45",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-wechat-title": "^2.0.5" "vue-wechat-title": "^2.0.5"
...@@ -12349,6 +12350,11 @@ ...@@ -12349,6 +12350,11 @@
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==", "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
"dev": true "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": { "node_modules/simple-swizzle": {
"version": "0.2.2", "version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
...@@ -25299,6 +25305,11 @@ ...@@ -25299,6 +25305,11 @@
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==", "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
"dev": true "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": { "simple-swizzle": {
"version": "0.2.2", "version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
......
package.json
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"postcss": "^7.0.27", "postcss": "^7.0.27",
"postcss-pxtorem": "^5.1.1", "postcss-pxtorem": "^5.1.1",
"sessionstorage": "^0.1.0", "sessionstorage": "^0.1.0",
"signature_pad": "^4.0.3",
"vant": "^2.12.45", "vant": "^2.12.45",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-wechat-title": "^2.0.5" "vue-wechat-title": "^2.0.5"
......
src/components/alert.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: ninglupeng * @Author: ninglupeng
* @Date: 2022-03-19 10:27:33 * @Date: 2022-03-19 10:27:33
* @LastEditors: ninglupeng * @LastEditors: ninglupeng
* @LastEditTime: 2022-03-19 14:09:01 * @LastEditTime: 2022-03-19 20:48:01
* @Description: * @Description:
--> -->
<template> <template>
...@@ -11,31 +11,34 @@ ...@@ -11,31 +11,34 @@
<strong class="signHandleTitle">{{ title }}</strong> <strong class="signHandleTitle">{{ title }}</strong>
</div> </div>
<div class="signHandle_bd"> <div class="signHandle_bd">
<div id="canvas" ref="canvas"></div> <canvas class="xhy-canvas" />
</div> </div>
<div class="signHandle_ft"> <div class="signHandle_ft">
<van-button <van-button
id="saveCanvas"
native-type="button" native-type="button"
block block
ref="saveCanvas" ref="saveCanvas"
class="saveCanvas"
type="info" type="info"
size="mini" size="mini"
@click="save()"
>保存</van-button >保存</van-button
> >
<van-button <van-button
id="clearCanvas"
block block
class="clearCanvas"
ref="clearCanvas" ref="clearCanvas"
type="warning" type="warning"
size="mini" size="mini"
native-type="button" native-type="button"
@click="againSignature"
>清除</van-button >清除</van-button
> >
<van-button <van-button
id="Cancel"
native-type="button" native-type="button"
block block
class="Cancel"
ref="Cancel" ref="Cancel"
type="default" type="default"
size="mini" size="mini"
...@@ -46,6 +49,8 @@ ...@@ -46,6 +49,8 @@
</div> </div>
</template> </template>
<script> <script>
import SignaturePad from "signature_pad";
export default { export default {
name: "", name: "",
props: { props: {
...@@ -55,86 +60,33 @@ export default { ...@@ -55,86 +60,33 @@ export default {
}, },
data() { data() {
return { return {
signSrc: "", signaturePad: null, // 存放竖屏SignaturePad对象
}; };
}, },
mounted() { mounted() {
this.lineCanvas({ this.init();
el: this.$refs.canvas, //绘制canvas的父级div
clearEl: this.$refs.clearCanvas, //清除按钮
saveEl: this.$refs.saveCanvas, //保存按钮
});
}, },
methods: { methods: {
lineCanvas(obj) { init() {
this.linewidth = 2; if (!this.signaturePad) {
this.color = "#000000"; let canvas = document.querySelector(".xhy-canvas");
this.background = "#ffffff"; this.signaturePad = new SignaturePad(canvas, {
for (var i in obj) { penColor: "black", //笔刷颜色
this[i] = obj[i]; 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); againSignature() {
this.cxt = this.canvas.getContext("2d"); this.signaturePad.clear();
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;
this.$emit("onCancel", this.signSrc); save() {
this.$notify({ type: "success", message: "签名保存成功" }); this.$emit("onCancel", this.signaturePad.toDataURL());
}.bind(this),
false
);
}, },
onCancel() { onCancel() {
this.$emit("onCancel"); this.$emit("onCancel");
...@@ -169,18 +121,6 @@ export default { ...@@ -169,18 +121,6 @@ export default {
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
color: #4a4a4a; color: #4a4a4a;
&:first-child {
padding: 2.7em 20px 1.7em;
color: #353535;
}
#canvas {
width: 100%;
height: 90vh;
position: relative;
canvas {
display: block;
}
}
} }
.signHandle_ft { .signHandle_ft {
...@@ -192,19 +132,19 @@ export default { ...@@ -192,19 +132,19 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-bottom: 20px;
#clearCanvas { .clearCanvas {
border: 1px solid #dedede; border: 1px solid #dedede;
z-index: 1; z-index: 1;
height: 40px; height: 40px;
} }
#saveCanvas { .saveCanvas {
text-align: center; text-align: center;
border: 1px solid #dedede; border: 1px solid #dedede;
z-index: 1; z-index: 1;
height: 40px; height: 40px;
} }
#Cancel { .Cancel {
text-align: center; text-align: center;
border: 1px solid #dedede; border: 1px solid #dedede;
z-index: 1; z-index: 1;
......
src/components/index.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: ninglupeng * @Author: ninglupeng
* @Date: 2020-11-24 16:18:58 * @Date: 2020-11-24 16:18:58
* @LastEditors: ninglupeng * @LastEditors: ninglupeng
* @LastEditTime: 2022-03-19 18:03:50 * @LastEditTime: 2022-03-19 20:37:01
* @Description: * @Description:
--> -->
<template> <template>
...@@ -60,8 +60,6 @@ import page6 from "./page6.vue"; ...@@ -60,8 +60,6 @@ import page6 from "./page6.vue";
import page7 from "./page7.vue"; import page7 from "./page7.vue";
import leaveHospital from "./leaveHospital.vue"; import leaveHospital from "./leaveHospital.vue";
import signHandleVue from "./signHandle.vue";
export default { export default {
inject: ["setLoading", "reload"], inject: ["setLoading", "reload"],
name: "index", name: "index",
...@@ -238,7 +236,7 @@ export default { ...@@ -238,7 +236,7 @@ export default {
page5, page5,
page6, page6,
page7, page7,
signHandleVue,
leaveHospital, leaveHospital,
}, },
}; };
......
src/components/page3.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: ninglupeng * @Author: ninglupeng
* @Date: 2020-11-24 16:18:58 * @Date: 2020-11-24 16:18:58
* @LastEditors: ninglupeng * @LastEditors: ninglupeng
* @LastEditTime: 2022-03-19 17:07:10 * @LastEditTime: 2022-03-19 20:37:13
* @Description: * @Description:
--> -->
<template> <template>
...@@ -91,20 +91,16 @@ ...@@ -91,20 +91,16 @@
</van-popup> </van-popup>
<jlPopup title="签名" v-if="showSignHandleVue" @onCancel="onCancel"> <jlPopup title="签名" v-if="showSignHandleVue" @onCancel="onCancel">
</jlPopup> </jlPopup>
</div> </div>
</template> </template>
<script> <script>
import { mapState, mapMutations } from "vuex"; import { mapState, mapMutations } from "vuex";
import { formatDate } from "../utils/common.js"; import { formatDate } from "../utils/common.js";
import signHandleVue from "./signHandle.vue";
import jlPopup from "./alert.vue"; import jlPopup from "./alert.vue";
export default { export default {
components: { components: {
signHandleVue,
jlPopup, jlPopup,
}, },
name: "page3", name: "page3",
...@@ -125,7 +121,6 @@ export default { ...@@ -125,7 +121,6 @@ export default {
mounted() {}, mounted() {},
methods: { methods: {
onCancel(val) { onCancel(val) {
// console.log(val);
this.agreementSign = val; this.agreementSign = val;
this.showSignHandleVue = false; 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 @@ ...@@ -2,7 +2,7 @@
* @Author: ninglupeng * @Author: ninglupeng
* @Date: 2022-03-17 15:06:50 * @Date: 2022-03-17 15:06:50
* @LastEditors: ninglupeng * @LastEditors: ninglupeng
* @LastEditTime: 2022-03-19 17:49:47 * @LastEditTime: 2022-03-19 19:37:12
* @Description: * @Description:
*/ */
import http from '@/http/index' import http from '@/http/index'
...@@ -13,7 +13,7 @@ const state = { ...@@ -13,7 +13,7 @@ const state = {
token: '', token: '',
name: '', name: '',
userInfo: {}, userInfo: {},
page: 1, page: 3,
} }
const mutations = { const mutations = {
......
yarn.lock
...@@ -7565,6 +7565,11 @@ ...@@ -7565,6 +7565,11 @@
"resolved" "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz" "resolved" "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz"
"version" "3.0.3" "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": "simple-swizzle@^0.2.2":
"integrity" "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=" "integrity" "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo="
"resolved" "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz" "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