NurseStationPersonAppletUl/pages/signature/signature.vue

<template>
	<view class="" style="background-color: #F4F5F7;">
		<Signature @init="onSignInit" style='background-color: #fff;'></Signature>
		<view class="btns">
			<button @click="clear">清空</button>
			<button @click="revoke">撤回</button>
			<button @click="saveTempFilePath">保存</button>
		</view>
	</view>
</template>

<script>
	import Signature from '@/components/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'>
	.btns {
		margin-top: 50rpx;
		display: flex;
	}

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