要实现的内容:手写签名,协议内容。点击提交后:生成1张图片,有协议内容和签署日期和签署人。
实现的效果图如下:
文章来源:https://www.toymoban.com/news/detail-609453.html
1、签名页面文章来源地址https://www.toymoban.com/news/detail-609453.html
<template>
<view class="index">
<u-navbar title="电子协议" :is-back="false" :border-bottom="false" title-color="#333" :background="{background:''}">
<view class="page_navbar_warp">
<image src="../../static/icon/0.png" mode="" class="page_navbar_commonImg" @click="$go(1,1)"></image>
</view>
</u-navbar>
<image src="https://www.*****/xieyi.png" mode="" class="banner"></image>
<view class="signBox">
<view class="title">签名区</view>
<view style="width: 700rpx;height: 450rpx;">
<l-signature disableScroll backgroundColor="rgba(255, 249, 238, .0)" ref="signatureRef" penColor="#333" :penSize="5" :openSmooth="true" ></l-signature>
</view>
</view>
<view class="footer">
<view class="btn1 t-c" @click="onClick('undo')">撤消</view>
<u-button class="btn2 t-c" @click="onClick('save')" :loading="loading">提交</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
loading:false,
}
},
methods:{
onClick(type) {
if(type == 'openSmooth') {
this.openSmooth
到了这里,关于uniapp:手写签名,多张图合成一张图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!