web 前端签名插件_signature_pad插件实现电子签名功能

其实针对普通电子签名的话，直接下载这个插件打开里面的docs文件引入js，css和index直接运行就是一个电子签名面板了，很实用，功能和性能都是比较好的，插件地址szimek/signature_pad

还有其中有个app.js文件也需要引入，如果不引入里面的功能都用不了，主要是几个按钮的方法，如果不需要的可以删除。

css样式中 .signature-pad这个类名的flex-direction值要改成默认的才能让按钮和画框同行显示，这个地方一般调试就看的到，但是还是想提醒一下。我做的是移动端的电子签名功能，同行显示是为了让页面看起来是横屏显示，所以按钮用了css3中的动画旋转效果。

.signature-pad {

max-height: 570px !important;

flex-direction: initial;

}

.signature-pad--body {

width: 80%;

}

.signature-pad--footer {

width: 10%;

}

.signature-pad--body, .signature-pad--footer {

display: inline !important;

}

button {

transform-origin: 15% 90%;

transform: rotate(90deg);

margin-top: 85px;

width: 100px;

border: none;

background-color: dodgerblue;

color: #fff;

padding: 6px;

}

//页面的HTML布局，因为插件是基于js的，所以里面的方法如果是用vue包着那么方法就会失效，但是在数据面前我又需要用到vue和它的一个vant框架，这里有做个了奇葩的事，在整个电子签名的结构下写一个div然后vue在里面代码在里面操作，不知道这样是不是不对的。

清