Signature 签字板

使用指南

import Signature from '@hips/uni-ui/lib/signature';

export default {
  components: {
    'hips-signature': Signature,
  },
};

跨平台支持

微信小程序	支付宝小程序	钉钉小程序	百度小程序	头条小程序	QQ 小程序
✔️	-	-	-	-	-

代码演示

基础用法

<hips-signature ref="signature" width="100%" :height="600" border />
<button @click="handleClear">
  clear
</button>
<button @click="handleToFile">
  to file
</button>
<button @click="handleUndo">
  undo
</button>

export default {
  data() {
    return {};
  },
  methods: {
    handleClear() {
      this.$refs.signature.clear();
    },
    handleToFile() {
      this.$refs.signature.toTempFile().then((res) => {
        this.signImage = res;
      });
    },
    handleUndo() {
      this.$refs.signature.undo();
    },
  },
};

修改样式

<hips-signature
  :width="430"
  :height="400"
  cid="newCid"
  background-color="pink"
  pen-color="white"
/>

Signature API

参数	说明	类型	默认值
cid	canvas-id，当单一页面存在多个时 signature 组件时，请务必为每个组件设定一个 id	String	hipsDefaultSignatureCvs
width	宽度	[Number,String]	100%
height	高度	[Number,String]	100%
border	是否显示边框	Boolean	false
background-color	canvas 的背景颜色	String	white
pen-color	画笔颜色	String	black

注意

1. signature 使用 canvas 实现签字

2. 当单一页面存在多个时 signature 组件时，请务必为每个组件设定一个 cid，且均不相同

3. width,height 参数默认是 100%，占据容器宽高，当设定为数字是，会拼接 rpx 单位，当为字符串时不拼接。

Events

名称	说明	参数
begin	每一个笔画开始	当前点坐标
end	每一个笔画结束	当前点坐标

Functions

名称	说明	参数
clear	清除 canvas	-
undo	撤销	-
isEmpty	判断当前 canvas 是否为空	-
toTempFile	导出为 png 图片，返回的是一个 promise ，可以通过 then() 获取结果	图片临时地址

this.$refs.signature.clear();

this.$refs.signature.undo();

const isEmpty = this.$refs.signature.isEmpty(); // true/false

this.$refs.signature.toTempFile().then((res) => {
  console.log('temp file path = ', res);
});