Signature 签名

预览

01:38



---

组件名：rice-signature

用于签名场景的组件，基于 Canvas 实现。
右侧模拟器有问题，请使用真机或者打开手机模式进行预览

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

警告

App端要自定义基座，否则会报错： canvas组件不存在，请确保组件代码正确或重新制作自定义基座。

基础用法

通过 submit 事件可以拿到签名的 base64 格式的图片。默认的图片背景色为透明色，如果要设置背景色，可以通过 bg-color 属性设置

<rice-signature @submit="onSubmit" />

<script setup lang="ts">
const signatureImg=ref('')
const onSubmit = (image:string) => {
  if (image == '') {
    showToast('未签名')
    return
  }
  signatureImg.value = image
}

</script>

自定义画笔样式

通过 line-color 设置画笔的颜色，line-width 设置画笔的粗细

<rice-signature line-color="#f56c6c" :line-width="6" @submit="onSubmit" />

自定义提示语

通过 tips 设置提示语

<rice-signature line-color="#f56c6c" tips="请签名" @submit="onSubmit" />

自定义按钮

设置按钮的值为空字符串即可不显示默认的按钮

<rice-signature ref="signatureRef" clear-button-text="" confirm-button-text="" />
<view class="btn">
  <rice-button text="done" type="primary" size="small" @click="done"></rice-button>
  <rice-button text="clear" type="warning" size="small" :custom-style="{margin:'0 6px'}"
    @click="clear"></rice-button>
</view>

<script setup>
  const signatureRef = ref<RiceSignatureComponentPublicInstance | null>(null)
  const done = () => {
    const image = signatureRef.value!.done() as string
    onSubmit(image)
  }

  const clear = () => {
    signatureRef.value!.clear()
  }
</script>

自定义背景色

通过 bg-color 设置画板的背景颜色，也就是导出图片的背景颜色。

<rice-signature bg-color="#f1f1f1" tips="请签名" @submit="onSubmit" />

API

Props

属性名	类型	说明	默认值
type	String	导出图片的格式,可选jpeg	png
width	String|Number	canvas宽度	100%
height	String|Number	canvas高度	200px
disabled	Boolean	是否禁用	-
tips	String	签名版中间的提示语	-
tips-size	String|Number	提示语大小	24px
tips-color	String	提示语颜色	-
line-color	String	笔触颜色	-
line-width	Number	线条宽度	-
bg-color	String	canvas背景颜色，也就是导出图片的背景颜色	-
content-bg-color	String	容器的背景颜色，导出图片的背景颜色为透明,如果设置了bgColor，该值无效	-
clear-button-text	String	清除按钮文案，为空时不显示此按钮	清除
confirm-button-text	String	确认按钮文案，为空时不显示此按钮	确认
custom-style	Object	自定义样式	-

Events

事件名	说明	回调参数
start	开始签名时触发	-
signing	签名过程中触发	-
end	结束签名时触发	-
submit	点击确定按钮时触发	(image:string)

方法

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

方法名	说明	返回值
done	触发 submit 事件	(image:string)
clear	可以调用此方法来清除签名	-
resize	外层元素大小或者组件显示状态变化时，可以调用此方法重绘	-

Radio Slots

名称	说明	参数
tips	自定义提示语	-

类型定义

组件导出如下类型

// 组件类型
const signatureRef=ref<RiceSignatureComponentPublicInstance|null>(null)