美文网首页
uniapp 手写签名组件

uniapp 手写签名组件

作者: 醉青风 | 来源:发表于2023-05-31 22:51 被阅读0次

组件地址https://ext.dcloud.net.cn/plugin?id=12795

欢迎使用 手写签名组件

手写签名组件,签名后可以获取到base64编码,同时内置了弹框签名组件,对于不想布局的同学来说可以开箱即用」

有项目需要开发的请联系 QQ:371524845

开发不易,如果帮助到你的,请支持 有问题请留言,作者会积极更新

使用方法

该组件内置两种组件signature和popupSignature,popupSignature是基于signature开发

signature基础用法

<template>
    <view class="content">
        <signature ></signature>
    </view>
</template>
<script>
import signature from '@/components/jp-signature/index.vue'
    export default {
        components:{signature},
        data() {
            return {
                title: ''
            }
        },
    }
</script>

引入方法

   <signature ></signature>
    import signature from '@/components/jp-signature/index.vue'
    components: { signature },

方法介绍

参数

参数名 类型 默认值 说明
height Number 屏幕高度 画布高度
width Number 屏幕宽度 画布宽度
strokeStyle String #000 画笔颜色
lineWidth Number 3 画笔大小
explain String 请在此签名 提示说明
rotate Boolean false 控制生成图片是否横屏

方法

方法名 返回参数 说明
handleReset 清空画布
handleConfirm Promise() 获取签名,成功返回 base64

popupSignature基础用法

popupSignature需要手动添加uni的uni-popup组件

<template>
    <view class="content">
        <signature v-model="title"></signature>
        {{title}}
    </view>
</template>
<script>
import signature from '@/components/jp-signature/popup.vue'
    export default {
        components:{signature},
        data() {
            return {
                title: ''
            }
        },
    }
</script>

引入方法

   <signature ></signature>
    import signature from '@/components/jp-signature/popup.vue'
    components: { signature },

方法介绍

参数

参数名 类型 默认值 说明
value String 签名内容,可以通过v-model绑定
label String 手写签名
required Boolean false
placeholder String 点击签名 签名说明
readonly Boolean false 是否只能可读

方法

方法名 返回参数 说明
toPop 打开弹窗
close 关闭弹窗
deleteImg 删除内容

事假

事件名 返回参数 说明
input 签名内容 签名内容

相关文章

网友评论

      本文标题:uniapp 手写签名组件

      本文链接:https://www.haomeiwen.com/subject/itfuedtx.html