更新记录

2.5.2（2023-12-19）

弹窗签名新增boundingBox属性，文档新增vue3使用方法

2.5.1（2023-11-17）

修复vue3兼容问题，新增点击图片除非事件

2.5（2023-11-14）

优化代码部分能力

平台兼容性

jp-signature及jp-signature-popup 写字板

jp-signature 写字板，可用业务签名等场景，方便用户自行改造

jp-signature-popup 小白专用弹框签名组件，方便小白开发使用，和输入框一样使用简单

平台兼容

代码演示

jp-signature 基本用法

<view style="width: 750rpx ;height: 500rpx;">
    <jp-signature  ref="signatureRef"   ></jp-signature>
</view>
<view>
    <button @click="clear">清空</button>
    <button @click="">撤消</button>
    <button @click="save">保存</button>
</view>

export default {
    data() {
        return {
            url: '',
        }
    },
    methods: {
        save(){
            this.$refs.signatureRef.canvasToTempFilePath({
                success: (res) => {
                    // 是否为空画板 无签名
                    console.log(res.isEmpty)
                    // 生成图片的临时路径
                    // H5 生成的是base64
                    this.url = res.tempFilePath
                }
            })
        },
        clear(){
            this.$refs.signatureRef.clear()
        },
        undo(){
            this.$refs.signatureRef.undo()
        },
    }
}

API

Props

事件 Events

常见问题

• 放在弹窗里时，尺寸不对 可以延时手写板出现时机，给手写板加vif或beforeDelay="300"
• boundingBox 微信小程序 pc 不支持, 因为获取不到 ImageData 数据

jp-signature-popup 基础用法

<template>
    <view class="content">
           <!-- #ifdef VUE2 -->
            <jp-signature-popup v-model="title"  />
            <!-- #endif -->
            <!-- #ifdef VUE3 -->
            <jp-signature-popup  v-model:value="title" />
            <!-- #endif -->
            {{title}}
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: ''
            }
        },
    }
</script>

参数

方法

事假

常见问题

• 在vue2和vue3中使用v-model有区别，vue2中为v-model，vue3为v-model:value