Signature 签名

用于签名场景，基于 Canvas 实现的签名组件。它提供了多种自定义选项，包括签名笔的颜色、宽度以及自定义操作按钮。

提醒

如果遇到导出图片不清晰，可以将exportScale设置为2以上。

基础用法

<wui-signature @submit="confirm" @clear="clear" />
<wui-img :height="img.height" :width="img.width" :src="img.src" v-if="img.src" />

const img = ref({
  width: 0,
  height: 0,
  src: ''
})
function confirm(result: SignatureResult) {
  img.value.src = result.tempFilePath
  img.value.height = result.height
  img.value.width = result.width
}

自定义画笔颜色

pen-color设置签名笔的颜色，默认为黑色。

<wui-signature pen-color="red" />

自定义画笔宽度

line-width设置签名笔的宽度，默认为2。

<wui-signature :line-width="6" />

自定义背景色

background-color设置画板的背景色，无默认值。

<wui-signature background-color="lightgray" />

禁用滚动

disable-scroll设置是否禁用画布滚动，默认为true。

<wui-signature :disable-scroll="false" />

自定义按钮

通过footer插槽可以自定义按钮。

<wui-signature :disabled="disabled">
  <template #footer="{ clear, confirm }">
    <wui-button block @click="changeDisabled" v-if="disabled">开始签名</wui-button>
    <wui-button v-if="!disabled" size="small" plain @click="clear">清除</wui-button>
    <wui-button v-if="!disabled" size="small" custom-style="margin-left: 4px" @click="confirm">确认</wui-button>
  </template>
</wui-signature>

const disabled = ref(true)

function changeDisabled() {
  disabled.value = false
}

Attributes

参数	说明	类型	可选值	默认值	最低版本
penColor	签名笔颜色	String	--	#000000	-
lineWidth	签名笔宽度	Number	--	2	-
height	画布的高度	Number	--	200	-
width	画布的宽度	Number	--	300	-
clearText	清空按钮的文本	String	--	清空	-
confirmText	确认按钮的文本	String	--	确认	-
fileType	目标文件的类型，uni.canvasToTempFilePath 属性介绍	String	--	png	-
quality	图片的质量，取值范围为 (0, 1]，不在范围内时当作 1.0 处理，uni.canvasToTempFilePath 属性介绍	Number	--	1	-
exportScale	导出图片的缩放比例	Number	--	1	-
disabled	是否禁用签名板	Boolean	--	false	-
backgroundColor	画板的背景色	String	--	--	-
disableScroll	是否禁用画布滚动	Boolean	--	true	-
showFooter	是否显示 Footer	Boolean	--	true	-
isRotate	生成签名图片是否旋转	Boolean	--	false	-
promptText	没有笔记时提交提示文案	String	--	''	-

Slot

name	说明	参数	最低版本
footer	自定义 footer	{ clear, confirm }	-

Events

事件名称	说明	参数	最低版本
start	开始签名时触发	-	-
end	结束签名时触发	-	-
signing	签名过程中触发	event	-
confirm	点击确定按钮时触发	{tempFilePath, width, height, success} 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功	-
clear	点击清空按钮时触发	-	-

Methods

对外暴露函数

事件名称	说明	参数	最低版本
confirm	点击确认按钮时触发	{tempFilePath, width, height, success} 分别为生成文件的临时路径 (本地路径)、生成图片宽、生成图片高、是否成功	-
clear	点击清空按钮时触发	-	-

源代码

文档

• 组件