更新记录

1.0.0(2025-11-06) 下载此版本

  • 首次发布
  • 支持重写、保存、取消
  • 返回 png 临时路径

平台兼容性

uni-app(3.6.12)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
× × -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - -

其他

多语言 暗黑模式 宽屏模式
× ×

hand-signature 手写签名板

自定义属性(Props)

参数 类型 默认值 说明
width String '100%' 签名板外层宽度,支持任意 CSS 单位,如 '100%'、'750rpx'、'400px'
height Number 730 签名板外层高度,单位 rpx
lineColor String '#1A1A1A' 笔迹颜色,任意合法 CSS 颜色值
lineSize Number 5 笔迹粗细,单位 px(canvas 逻辑像素)
background String '#f6f6f6' 整个组件根节点背景色
padding String '20rpx' 根节点内边距,同 CSS 语法
textColor String '#E59C36' 顶部“取消/确定”文字颜色
btnColor String '#3238ec' 底部“保存”按钮背景色(“重写”按钮边框同色)

使用示例


<template>
    <hand-signature
        width="750rpx"
        height="600"
        line-color="#ff6b6b"
        line-size="8"
        background="#ffffff"
        text-color="#333"
        btn-color="#fa5151"
        @confirm="onConfirm"
        @cancel="onCancel"
    />
</template>

<script>
import HandSignature from '@/uni_modules/hand-signature'
export default {
  components: { HandSignature },
  methods: {
    onConfirm(path) {
      console.log('签名图片临时路径:', path)
      // 可直接预览或上传
      uni.previewImage({ urls: [path] })
    },
    onCancel() {
      console.log('用户取消')
    }
  }
}
</script>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。