Signature 签名

基于Canvas的签名组件。

基本用法

默认

  1. <nut-signature
  2. @confirm="confirm"
  3. @clear="clear"
  4. ></nut-signature>
  5. <p class="demo-tips demo">Tips: 点击确认按钮,下方显示签名图片</p>
  1. export default {
  2. data(){
  3. return{
  4. }
  5. },
  6. methods:{
  7. confirm(canvas, data) {
  8. let img = document.createElement('img');
  9. img.src = data;
  10. document.querySelector('.demo').appendChild(img);
  11. },
  12. clear() {
  13. let img = document.querySelector('.demo img');
  14. if (img) {
  15. img.remove();
  16. }
  17. }
  18. }
  19. }

修改签字颜色和画笔粗细

  1. <nut-signature
  2. @confirm="confirm1"
  3. @clear="clear1"
  4. :lineWidth="lineWidth"
  5. :strokeStyle="strokeStyle"
  6. ></nut-signature>
  7. <p class="demo-tips demo">Tips: 点击确认按钮,下方显示签名图片</p>
  1. export default {
  2. data(){
  3. return{
  4. lineWidth: 4,
  5. strokeStyle: 'green'
  6. }
  7. },
  8. methods:{
  9. confirm(canvas, data) {
  10. let img = document.createElement('img');
  11. img.src = data;
  12. document.querySelector('.demo').appendChild(img);
  13. },
  14. clear() {
  15. let img = document.querySelector('.demo img');
  16. if (img) {
  17. img.remove();
  18. }
  19. }
  20. }
  21. }

Prop

字段说明类型默认值
custom-class自定义classString-
line-width线条的宽度Number3
stroke-style绘图笔触颜色String‘#000’
type图片格式String‘png’
un-support-tpl不支持Canvas情况下的展示文案String‘对不起,当前浏览器不支持Canvas,无法使用本控件!’

Event

字段说明回调参数
confirm点击确认按钮触发事件回调函数canvas和签名图片展示的 data URI
clear点击重签按钮触发事件回调函数

Signature 签名 - 图1