首先了解业务需求 在什么时候需要在线签名呢

签名通常在以下情况下需要使用：

• 合同签署：在商业合同、租赁合同、购房合同等法律文件中，签名是证明参与者同意合同内容和条款的重要方式。
• 授权确认：某些场景需要用户通过签名来确认授权，例如在软件或移动应用程序中，用户可能需要用手写签名确认授权使用某些功能或服务。
• 文件认证：在法律、财务、医疗等领域，签名可用于文件的认证和验证，确保文件的真实性和完整性。
• 批准或确认：在企业管理中，领导或负责人可能需要签名来批准某项决策或确认某项业务。
• 艺术创作：在艺术创作中，签名是艺术家对作品的认可和鉴定，也是作品的版权标识。
• 个人身份认证：在某些情况下，签名可用作个人身份认证，例如签署银行文件或开户申请。

总体而言，签名是一种权威和法律承认的方式，用于确认参与者的意愿、意见或身份。在许多不同的行业和场景中，签名都扮演着重要的角色。

使用前需在插件市场安装插件 插件ID：lime-signature

HTML代码

<template>
  <view class='signature h-100'>
    <view class='h-100'>
      <l-signature
        disableScroll
        backgroundColor='#ddd'
        ref='signatureRef'
        :penColor='penColor'
        :penSize='penSize'
        :openSmooth='openSmooth'
      ></l-signature>
    </view>
    <view class='button'>
      <view @click='onClick("clear")'>
        <!-- clear按钮的SVG图标 -->
        清空
      </view>
      <view @click='onClick("undo")'>
        <!-- undo按钮的SVG图标 -->
        撤回
      </view>
      <view @click='onClick("save")'>
        <!-- save按钮的SVG图标 -->
        保存
      </view>
    </view>
  </view>
</template>

Javascript代码

<script>
export default {
  data() {
    return {
      title: 'Hello',
      penColor: 'red',
      penSize: 5,
      url: '',
      openSmooth: true
    }
  },
  methods: {
    onClick(type) {
      if (type == 'openSmooth') {
        this.openSmooth = !this.openSmooth
        return
      }
      if (type == 'save') {
        this.$refs.signatureRef.canvasToTempFilePath({
          success: (res) => {
            // 是否为空画板 无签名
            console.log(res.isEmpty)
            // 生成图片的临时路径
            // H5 生成的是base64
            this.url = res.tempFilePath
          }
        })
        return
      }
      if (this.$refs.signatureRef)
        this.$refs.signatureRef[type]()
    }
  }
}
</script>

Css代码

<style>
.signature {
  position: relative;
}
.button {
  position: absolute;
  background: #fff;
  padding: 10px;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  align-items: center;
}
.h-100 {
  height: 100%;
}
</style>

API

Props

参数	说明	类型	默认值
penSize	画笔大小	number	2
minLineWidth	线条最小宽	number	2
maxLineWidth	线条最大宽	number	6
penColor	画笔颜色	string	black
backgroundColor	背景颜色	string	“”
type	指定 canvas 类型	string	2d
openSmooth	是否模拟压感	boolean	false
beforeDelay	延时初始化，在放在弹窗里可以使用 （毫秒）	number	0
maxHistoryLength	限制历史记录数，即最大可撤销数，传入0则关闭历史记录功能	boolean	20
landscape	横屏	boolean
disableScroll	当在写字时，禁止屏幕滚动以及下拉刷新	boolean	true
boundingBox	只生成内容区域，即未画部分不生成，有性能的损耗	boolean	false

事件 Events

事件名	说明	回调
undo	撤消，回退到上一步
clear	清空，清空画板
canvasToTempFilePath	保存，生成图片，与官方保持一致，但不需要传canvasId

Vue 2 和 Vue 3 的平台兼容性：

平台/浏览器	Vue 2 兼容性	Vue 3 兼容性
App	√	√
快应用	×	×
微信小程序	√	√
支付宝小程序	√	√
百度小程序	√	√
字节小程序	√	√
QQ小程序	√	√
HBuilderX 3.5.4 app-vue	√	√
HBuilderX 3.5.4 app-nvue	√	√
钉钉小程序	×	×
快手小程序	×	×
飞书小程序	×	×
京东小程序	×	×
H5-Safari	√	√
Android Browser	√	√
微信浏览器(Android)	√	√
QQ浏览器(Android)	√	√
Chrome	√	√
IE	×	×
Edge	×	×
Firefox	√	√
PC-Safari	√	√