Autograph 手写签名

提供可手写的画布，并支持清空和导出签名。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	×	✓

基础用法

<template>
  <!-- 签名画布 -->
  <fui-autograph ref="signatureRef" />
  <button @click="clearSignature">重新签名</button>
</template>

<script>
export default {
  methods: {
    /** 清空签名画布 */
    clearSignature() {
      this.$refs.signatureRef.redraw();
    }
  }
};
</script>

属性

属性	类型	说明	官网默认值
width	Number / String	画布宽度，0 使用屏幕宽度，单位 rpx	0
height	Number / String	画布高度，单位 rpx	400
background	String	画布外层背景色	#ffffff
lineWidth	Number / String	线条宽度，单位 px	5
color	String	线条颜色	#181818
tips	String	未签名时调用完成方法的提示	请签名！

事件

事件	说明	回调参数
ready	画布初始化完成	{ canvasId }

redraw() 清空画布；drawComplete(callback) 导出签名，回调接收图片路径，失败时为 false。未签名且启用提示时会显示提示并返回。官网支持表中快手小程序未列为支持。

插槽

插槽	说明
—	官网未列出该组件的插槽