uniapp 手写签名组件

组件地址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://ext....
    FSYANG阅读 14,735评论 2 2
  • 最近的项目做了一个信息展示,客户的需求改了,因为一屏展示太多了,想多屏,还不加分页,只能增加滚动。 查询了好多资料...
    风云变色阅读 1,592评论 0 1
  • zq-scancode插件使用说明(v1.0.3) 1、引入包 2、调用方法 2.1、开启扫码 2.2、关闭扫码 ...
    js_zhiqiang阅读 3,959评论 0 0
  • 组件是视图层的基本组成单元。 组件是一个单独且可复用的功能模块的封装。 一个组件包括开始标签和结束标签,标签上可以...
    邹邹_ZZ阅读 453评论 0 0
  • 简介 一款使用简单的筛选组件,适配app、微信小程序、H5。 dcloud插件市场地址:sl-filtergith...
    SongLazy阅读 56,151评论 9 12