# t-signature

Signature 签名

t-signature 组件介绍

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

t-signature 平台兼容

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

t-signature 基础用法

<template>
	<view class="twh-100% dr">
		<tui-theme-switch></tui-theme-switch>
		<t-signature :class="[`twh-100%! tvg`]"
					 ref="signEl"
					 type="primary"
					 :lineSize="3"></t-signature>
		<t-button class="da atr-90 dl-5 dt-20 w-60"
				  type="error"
				  @click="quit">退出</t-button>
		<t-row class="da db-110 atr-90 dl-n90">
			<t-button class="mr-15"
					  type="error"
					  @click="clear">清空</t-button>
			<t-button class="mr-15"
					  type="warning"
					  @click="undo">撤消</t-button>
			<t-button class="mr-15"
					  type="success"
					  @click="redo">恢复</t-button>
			<t-button class="mr-15"
					  type="primary"
					  @click="save">确定</t-button>
		</t-row>
	</view>
</template>
<script setup>
	import { ref } from 'vue'
	const signEl = ref<TSignatureComponentPublicInstance | null>(null)
	const quit = () => {
		uni.navigateBack()
	}
	const clear = () => {
		signEl.value?.clear()
	}
	const undo = () => {
		signEl.value?.undo()
	}
	const redo = () => {
		signEl.value?.redo()
	}
	const save = () => {
		signEl.value?.save().then((res : string) => {
			uni.previewImage({ urls: [res] })
		})
	}
</script>

t-signature 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	线条大小	-

t-signature Events

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

Methods

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