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.         },
  13.         clear() {
  14.             let img = document.querySelector('.demo img'); 
  15.             if (img) {
  16.                 img.remove();
  17.             }
  18.         }
  19.     }
  20. }

修改签字颜色和画笔粗细

  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.         },
  15.         clear() {
  16.             let img = document.querySelector('.demo img'); 
  17.             if (img) {
  18.                 img.remove();
  19.             }
  20.         }
  21.     }
  22. }

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