xinelu-applet-ui/pagesC/signature/signature.vue

<template>
	<view class="signature" style="background-color: #F4F5F7;height: 800rpx;">
		<Signature @init="onSignInit" style='background-color: #fff;height: 700rpx;width: 100%;'></Signature>
		<view class="btns">
			<button @click="clear">清空</button>
			<button @click="revoke">撤回</button>
			<button @click="saveTempFilePath">保存</button>
		</view>
	</view>
</template>
<script>
	import Signature from '../v-sign/v-sign.vue'
	export default {
		components: {
			Signature
		},
		methods: {
			onSignInit(signCtx) {
				this.signCtx = signCtx
			},
			// 清空
			clear() {
				this.signCtx.clear()
			},
			// 撤回
			revoke() {
				this.signCtx.revoke()
			},
			// 保存为临时图片路径，h5返回 base64
			async saveTempFilePath() {
				const res = await this.signCtx.canvasToTempFilePath()
				this.$emit('userSignaturePictureUrl', res)
			},
		}
	}
</script>

<style lang='scss'>
	.signature {
		height: 800rpx;
		position: relative;
		z-index: 10086;
	}

	.btns {
		margin-top: 50rpx;
		display: flex;
	}

	button {
		width: 30%;
	}
</style>