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')
自定义背景颜色
通过 background-color
来自定义背景颜色。
<z-signature background-color="#eee" @submit="onSubmit" @clear="onClear" />
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
pen-color | 笔触颜色,默认黑色 | string | #000 |
line-width | 线条宽度 | number | 3 |
background-color | 背景颜色 | string | - |
clear-button-text | 清除按钮文案 | string | 清空 |
confirm-button-text | 确认按钮文案 | string | 确认 |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
start | 开始签名时触发 | - |
end | 结束签名时触发 | - |
signing | 签名过程中触发 | event: TouchEvent |
submit | 点击确定按钮时触发 | data: { image: string; canvas: HTMLCanvasElement } |
clear | 点击取消按钮时触发 | - |
主题定制
样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--z-signature-padding | var(--z-padding-xs) | - |
--z-signature-content-height | 400rpx | 画布高度 |
--z-signature-content-background | var(--z-background-2) | 画布背景色 |
--z-signature-content-border | 2rpx dotted #dadada | 画布边框样式 |