Signature 签名

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

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<view class="sign-content">
		<view class="sign-bg">
			<text class="txt">签名区</text>
		</view>
		<t-signature class="ff" ref="signatures" type="p" :lineSize="3"></t-signature>
	</view>
	<view class="sign-toos-box">
		<t-status-bar />
		<t-button class="sign-toos sign-toos-mar" type="error" @click="quit">退出</t-button>
		<view style="flex: 1;"></view>
		<view style="padding-bottom: 40rpx;">
			<view class="buttonbox">
				<t-button class="sign-toos sign-toos-mar" type="error" @click="clear">清空</t-button>
			</view>
			<view class="buttonbox">
				<t-button class="sign-toos sign-toos-mar" type="warning" @click="undo">撤消</t-button>
			</view>
			<view class="buttonbox">
				<t-button class="sign-toos sign-toos-mar" type="success" @click="redo">恢复</t-button>
			</view>
			<view class="buttonbox">
				<t-button class="sign-toos sign-toos-mar sign-toos-bottom" type="primary" @click="save">确定</t-button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				signEl: null as TSignatureComponentPublicInstance | null
			}
		},
		methods: {
			quit() {
				uni.navigateBack()
			},
			clear() {
				const sign = this.signEl as TSignatureComponentPublicInstance
				sign.clear()
			},
			undo() {
				const sign = this.signEl as TSignatureComponentPublicInstance
				sign.undo()
			},
			redo() {
				const sign = this.signEl as TSignatureComponentPublicInstance
				sign.redo()
			},
			save() {
				const sign = this.signEl as TSignatureComponentPublicInstance
				sign.save().then((res : string) => {
					uni.previewImage({ urls: [res] })
				})
			}
		},
		mounted() {
			this.signEl = this.$refs['signatures'] as TSignatureComponentPublicInstance
		}
	}
</script>
<style lang="scss" scoped>
	.sign-content {
		background-color: #FEFAE7;
		flex: 1;
		position: relative;

		.sign-bg {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.txt {
				color: #eeead9;
				font-size: 150rpx;
				transform: rotate(90deg);
				letter-spacing: 15rpx;
			}
		}
	}

	.buttonbox {
		height: 120rpx;
		padding-top: 20rpx;
		overflow: visible;
	}

	.sign-toos-box {
		position: fixed;
		bottom: 0;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		background-color: #F6F0DE;
		padding: 0 12rpx;
	}

	.sign-toos {
		// transform-origin: top center;
		transform: rotate(90deg);
	}

	.sign-toos-mar {
		margin-top: 40rpx;
	}

	.sign-toos-bottom {
		margin-bottom: 40rpx;
	}
</style>

Props

名称	描述	类型	默认值
color	线条颜色	String	''
lineSize	线条大小	Number	2
openSmooth	是否开启平滑模式	Boolean	false
minWidth	线条最小宽度	Number	2
maxWidth	线条最大宽度	Number	6
minSpeed	最小速度	Number	1.5
maxWidthDiffRate	最大宽度变化率	Number	20
maxHistory	最大历史记录点数	Number	20
disableScroll	是否禁用滚动	Boolean	true
disabled	是否禁用组件	Boolean	false
landscape	是否横屏模式	Boolean	true

Methods

名称	描述
clear	清除画布上的签名
undo	撤销上一次绘制
redo	重做上一次撤销的操作
save	保存签名图像为数据URL