uniProject/uni_modules/jp-signature/实例/index.vue

<template>
	<view class="h100">
		<!-- #ifdef VUE2 -->
		<jp-signature-popup v-model="image" required />
		<view>{{image}}</view>
		<view class="but" @click="toPop1">自定义样式，弹框调用</view>
		<jp-signature-popup ref="signature1" popup v-model="image2" />
		<image :src="image2" style="width: 200px;" mode="widthFix"></image>
		<!-- #endif -->
		<!-- #ifdef VUE3 -->
		<jp-signature-popup  v-model:value="image" required />
		<view>{{image}}</view>
		<view class="but" @click="toPop1">自定义样式，弹框调用</view>
		<jp-signature-popup ref="signature1" popup v-model:value="image2" />
		<image :src="image2" style="width: 200px;" mode="widthFix"></image>
		<!-- #endif -->
		{{image2}}
		
		
		<view>下面是使用 jp-signature-popup 结合 jp-merge  在文档上签字</view>
		<view style="text-align: center;padding-bottom: 150px;">
			<image :src="image4" v-if="image4" style="width: 350px;height: 350px;border: 1px solid #ccc;"></image>
			<image src="../../static/sqs.jpg" v-else style="width: 350px;height: 350px;border: 1px solid #ccc;"></image>
			<view class="but" style="margin: 0 25px;" @click="toPop2">我要在上面签字</view>
			<jp-signature-popup ref="signature2" @change="setImg" popup v-model:value="image3" />
			<jp-merge bgImage="../../static/sqs.jpg" ref="jpMerge"></jp-merge>
		</view>
	</view>
</template>
<!-- 有项目需要开发的请联系 扣 - 371524845 -->
<script>
	export default {
		data() {
			return {
				image:'',
				image2:'',
				image3:'',
				image4:''
			}
		},
		methods: {
			setImg(val){
				if(val){
					this.$refs.jpMerge.exportPost(val).then(res => {
						this.image4 = res
				    })
				}
			},
			toPop1(){
				this.$refs.signature1.toPop()
			},
			toPop2(){
				this.$refs.signature2.toPop()
			}
		}
	}
</script>

<style lang="scss">
	.but{
		margin: 25px;
		line-height: 40px;
		text-align: center;
		background-color: #55aaff;
		color: #fff;
	}
	.sssv{
		height: 1150px;
	}
</style>