• Vant React

Signature 签名

介绍

用于签名场景的组件，基于 Canvas 实现。

请升级 taroify 到 >= v0.1.1-alpha.2 版本来使用该组件。

引入

import { Signature } from "@taroify/core"

代码演示

基础用法

Canvas 实例提供两个方法

  • getImage
    • image：签名对应的图片，为 base64 字符串格式。若签名为空，则返回空字符串。
    • canvas：Canvas 元素。
  • clear：清空
import { Signature, SignatureInstance, Flex, Button } from "@taroify/core"

function BasicSignature() {
  const ref = useRef<SignatureInstance>(null)
  return (
    <>
      <Signature ref={ref} />
      <Flex justify="end">
        <Button
          size="small"
          onClick={() => {
            ref.current?.clear()
          }}
          style={{ marginRight: "1rem" }}
        >
          取消
        </Button>
        <Button
          size="small"
          color="primary"
          onClick={() => {
            console.log(ref.current?.getImage())
          }}
        >
          确认
        </Button>
      </Flex>
    </>
  )
}

自定义颜色

通过 penColor 来自定义笔触颜色。

<Signature penColor="#ff0000" />

自定义线宽

通过 lineWidth 来自定义线条宽度。

<Signature lineWidth={6} />

自定义背景颜色

通过 backgroundColor 来自定义背景颜色。

<Signature backgroundColor="#eee" />

API

Signature Props

参数说明类型默认值
type导出图片类型stringpng
penColor笔触颜色，默认黑色string#000
lineWidth线条宽度number3
backgroundColor背景颜色string-
canvasIdcanvas idstringtaroify-canvas

Signature Events

事件名说明回调参数
onStart开始签名时触发-
onEnd结束签名时触发-
onSigning签名过程中触发-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值描述
—signature-paddingvar(—van-padding-xs)-
—signature-content-height200px画布高度
—signature-content-backgroundvar(—background-color-2)画布背景色
—signature-content-border1px dotted #dadada画布边框样式
—signature-border-radius8px画布圆角