<template>
	<view class="signature-container">
		<u-signature
			ref="signatureRef"
			:penSize="penSize"
			:backgroundColor="backgroundColor"
			@confirm="onConfirm"
		></u-signature>
	</view>
</template>

<script>
export default {
	data() {
		return {
			penSize: 5,
			backgroundColor: '#fff'
		}
	},
	methods: {
		onConfirm(res) {
			console.log('签名完成', res);
			// res 为签名图片的 base64 数据
		}
	}
};
</script>

<style lang="scss" scoped>
	.signature-container {
		width: 100%;
		height: 300px;
		border: 1px solid #d6d7d8;
		border-radius: 8px;
	}
</style>
✅ Copy success!
copy

<template>
	<view class="signature-container">
		<u-signature
			ref="signatureRef"
			:penColor="penColor"
			:penColorList="penColorList"
			:showColorList="true"
		></u-signature>
	</view>
</template>

<script>
export default {
	data() {
		return {
			penColor: '#FF1E10',
			penColorList: ['#4D4D4D', '#FF1E10', '#FFBE00', '#1A9BFF', '#1AAD19']
		}
	}
};
</script>
✅ Copy success!
copy

<template>
	<view class="signature-container">
		<u-signature
			ref="signatureRef"
			:showToolbar="true"
			:showClear="true"
			:showUndo="true"
			clearText="清空"
			undoText="撤销"
			confirmText="完成"
		></u-signature>
	</view>
</template>
✅ Copy success!
copy

<template>
	<view class="signature-container">
		<u-signature
			ref="signatureRef"
			:openSmooth="true"
			:minLineWidth="2"
			:maxLineWidth="8"
		></u-signature>
	</view>
</template>
✅ Copy success!
copy

<template>
	<view class="signature-container">
		<u-signature
			ref="signatureRef"
			:showWatermark="true"
			:watermark="watermark"
		></u-signature>
	</view>
</template>

<script>
export default {
	data() {
		return {
			watermark: {
				showOnSave: true,
				text: '电子签名',
				color: 'rgba(0, 0, 0, 0.1)',
				fontSize: 16,
				fontFamily: 'Arial',
				rotate: -30,
				spacing: 100,
				single: false
			}
		}
	}
};
</script>
✅ Copy success!
copy

<template>
	<view>
		<u-signature ref="signatureRef"></u-signature>
		<view class="button-container">
			<u-button @click="clear">清空</u-button>
			<u-button @click="undo">撤销</u-button>
			<u-button @click="confirm">完成</u-button>
		</view>
	</view>
</template>

<script>
export default {
	methods: {
		clear() {
			this.$refs.signatureRef.clear();
		},
		undo() {
			this.$refs.signatureRef.undo();
		},
		confirm() {
			this.$refs.signatureRef.getImage().then(res => {
				console.log('签名图片', res);
			});
		}
	}
};
</script>
✅ Copy success!
copy

<template>
	<view class="signature-container">
		<u-signature
			ref="signatureRef"
			:customStyle="customStyle"
			:toolbarStyle="toolbarStyle"
		></u-signature>
	</view>
</template>

<script>
export default {
	data() {
		return {
			customStyle: {
				border: '2px solid #e4e7ed',
				borderRadius: '8px'
			},
			toolbarStyle: {
				backgroundColor: '#f5f7fa',
				padding: '10px'
			}
		}
	}
};
</script>
✅ Copy success!
copy