71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
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>
|