You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.9 KiB
70 lines
1.9 KiB
<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>
|
|
|