最近业务上需要用到移动端手写签名, 找了几个组件都不太如意, 遂自己封装一个组件
设计图如下:
本组件基于Signature Pad库, 在Signature Pad库的基础上完成上方设计图中的手写签名组件, 所以需要先引入Signature Pad npm包 --------- 点我跳转查看(Signature Pad)
npm install --save signature_pad
- 创建手写签名组件 components/autograph/index.vue
<template>
<div class="xhy-autograph-box">
<div class="autograph-box">
<div class="inside">
<van-icon class="icon-full" name="enlarge" color="#008cff" @click="fullScreenShow" />
<canvas class="xhy-canvas" />
<span @click="againSignature">重新签名</span>
</div>
</div>
<van-popup v-model="isShowFull" @close="closeFull" :close-on-click-overlay="false" close-on-popstate safe-area-inset-bottom closeable close-icon-position="bottom-right" position="left" :style="{ height: '100%', width: '100%' }">
<div class="popup-box">
<canvas class="xhy-canvasFull" />
<div class="panel-full">
<van-button class="btn-again" type="info" @click="againFull">重新签名</van-button>
<van-button class="btn-confirm" plain type="primary" @click="confirmFull">确认签名</van-button>
</div>
</div>
</van-popup>
</div>
</template>
<script>
import SignaturePad from 'signature_pad';
export default {
name: "xhy-autograph",
props: {
config: {
type: Object,
default: {
penColor: 'green', //笔刷颜色
minWidth: 1 //最小宽度
}
}
},
data() {
return {
isShowFull: false, // 是否横屏显示
signaturePad: null, // 存放竖屏SignaturePad对象
signaturePadFull: null, // 存放横屏SignaturePad对象
value: '',
fullValue: ''
}
},
mounted() {
this.init();
},
methods: {
init() {
if