t-signature

Signature 签名

组件介绍

签名组件，创建签名区域的组件，支持多种配置，包括线条颜色、大小、平滑模式等。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

<template>
  <view class="signature-demo">
    <t-signature 
      ref="signatureRef"
      color="#000000"
      :lineSize="3"
      :maxHistory="20"
    ></t-signature>
    <view class="buttons">
      <t-button @click="clear">清空</t-button>
      <t-button @click="undo">撤销</t-button>
      <t-button @click="redo">重做</t-button>
      <t-button @click="save">保存</t-button>
    </view>
  </view>
</template>

<script setup>
const signatureRef = ref(null);

function clear() {
  signatureRef.value.clear();
}

function undo() {
  signatureRef.value.undo();
}

function redo() {
  signatureRef.value.redo();
}

function save() {
  const imageData = signatureRef.value.save();
  console.log('签名图片数据:', imageData);
}
</script>

<style scoped>
.signature-demo {
  padding: 40rpx;
}
.buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}
</style>

Props

属性名	类型	默认值	说明	可选值
size	String	""	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
color	String	""	线条颜色	-
maxHistory	Number	20	最大历史记录点数	-
lineSize	Number	2	线条大小	-

Events

事件名	说明	回调参数
change	签名内容变化时触发	-

Methods

方法名	说明	参数	返回值
clear	清空签名	无	无
undo	撤销上一步	无	无
redo	重做上一步	无	无
save	保存签名	无	图片数据
isEmpty	判断是否为空	无	Boolean