CUserSignature 用户签名组件

功能说明

CUserSignature 是一个用户手写签名组件，用于在表单中收集用户的电子签名。组件提供了手写板功能，支持签名的绘制、清除和保存，适用于电子合同、协议等需要用户签名的场景。

引用方式

import { CUserSignature } from '@components/forms/userSignature';

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• width (Number，可选)：签名板宽度，单位为 px，默认为容器宽度
• height (Number，可选)：签名板高度，单位为 px，默认为 200
• lineWidth (Number，可选)：签名线条宽度，默认为 3
• lineColor (String，可选)：签名线条颜色，默认为 '#000000'
• background (String，可选)：签名板背景色，默认为 '#ffffff'
• placeholder (String，可选)：签名板占位提示文本
• readOnly (Boolean，可选)：只读模式，默认为 false

使用示例

基础用法

<template>
  <CForm :form="form">
    <CFormItem name="signature" label="签名">
      <CUserSignature 
        placeholder="请在此处签名" 
      />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CUserSignature } from '@components/forms/userSignature';

export default {
  components: {
    CForm,
    CFormItem,
    CUserSignature
  },
  data() {
    return {
      form: {
        signature: ''
      }
    };
  }
};
</script>

自定义配置

<CFormItem name="contractSign" label="合同签名">
  <CUserSignature 
    :width="300"
    :height="150"
    :lineWidth="4"
    lineColor="#1a1a1a"
    background="#f5f5f5"
    placeholder="请在此处签署您的姓名" 
  />
</CFormItem>

注意事项

1. 组件会将签名转换为 base64 格式的图片数据存储在表单中
2. 签名板提供以下功能按钮：

• 清除：清除当前签名
• 确认：保存当前签名

1. 建议根据实际使用场景设置合适的签名板尺寸
2. 在移动端使用时，支持触摸书写
3. 在只读模式下，只能查看已保存的签名，无法进行签名操作
4. 为了保证签名的清晰度，建议使用适当的 lineWidth 值