Signature 签名

介绍

用于签名场景的组件。

代码演示

基础用法

当点击确认按钮时,组件会触发 submit 事件,事件的第一个参数为 data,包含以下字段:

  • image:图片通过canvas导出的路径,小程序此路径为临时文件路径。
  • width:图片的宽度。
  • height:图片的高度。
  • canvas:Canvas 元素。
<z-signature @submit="onSubmit" @clear="onClear" />
<z-image v-if="image" :width="width" :height="height" :src="image" />
import { ref } from 'vue'
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const image = ref('')
const onSubmit = (data: any) => {
  image.value = data.image
  width.value = data.width
  height.value = data.height
}
const onClear = () => toast.showToast('clear')

自定义颜色

通过 pen-color 来自定义笔触颜色。

<z-signature pen-color="#ff0000" @submit="onSubmit" @clear="onClear" />

自定义线宽

通过 line-width 来自定义线条宽度。

<z-signature :line-width="6" @submit="onSubmit" @clear="onClear" />

自定义背景颜色

通过 background-color 来自定义背景颜色。

<z-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />

API

Props

参数说明类型默认值
pen-color笔触颜色,默认黑色string#000
line-width线条宽度number3
background-color背景颜色string-
clear-button-text清除按钮文案string清空
confirm-button-text确认按钮文案string确认

Events

事件名说明回调参数
start开始签名时触发-
end结束签名时触发-
signing签名过程中触发event: TouchEvent
submit点击确定按钮时触发data: { image: string; canvas: HTMLCanvasElement }
clear点击取消按钮时触发-

方法

通过 ref 可以获取到 Signature 实例并调用实例方法。

方法名说明参数返回值
resize外层元素大小或组件显示状态变化时,可以调用此方法来触发重绘--

主题定制

样式变量

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

名称默认值描述
--z-signature-paddingvar(--z-padding-xs)-
--z-signature-content-height400rpx画布高度
--z-signature-content-backgroundvar(--z-background-2)画布背景色
--z-signature-content-border2rpx dotted #dadada画布边框样式