Sign 电子签名

avue-sign 提供支持指针、鼠标和触摸输入的签名画板，可导出图片，也可生成演示印章图形。

效果预览可直接操作下方示例

在画板中签名后点击生成图片，也可以生成印章再清空重画。示例先检查是否为空，避免把空画板当作有效签名。

正在加载示例…

<template>
  <avue-sign ref="sign" title="手写签名" :height="280" show-toolbar @clear="image = ''" />
  <el-space wrap class="sign-demo-actions">
    <el-button type="primary" @click="exportImage">生成图片</el-button>
    <el-button @click="createSeal">演示印章</el-button>
    <el-button @click="sign?.clear()">清空画板</el-button>
  </el-space>
  <el-alert v-if="error" :title="error" type="warning" :closable="false" />
  <img v-if="image" :src="image" class="sign-demo-preview" alt="生成的签名图片" />
</template>

<script setup>
import { ref } from 'vue'
const sign = ref(null)
const image = ref('')
const error = ref('')
function exportImage() {
  error.value = ''
  if (!sign.value || sign.value.isEmptySignature()) { error.value = '请先填写签名'; return }
  image.value = sign.value.submit(300, 140)
}
function createSeal() {
  error.value = ''
  image.value = sign.value?.getStar('文档演示', 'Avue 示例团队', 'DEMO001') || ''
}
</script>

<style scoped>
.sign-demo-actions { margin: 12px 0; }
.sign-demo-preview { display: block; max-width: 100%; border: 1px solid var(--el-border-color); border-radius: 6px; }
</style>

Props

参数	说明	类型	默认值
width / height	画布像素宽高，外观宽度不超过父容器	number	600 / 400
lineWidth / lineColor	线宽 / 线条颜色	number / string	3 / #1f2937
backgroundColor	画布背景；可设 transparent	string	#ffffff
disabled / readonly	禁止绘制、清空与生成印章	boolean	false
title	画板标题	string	—
placeholder	空画板提示	string	请在此处签名
showToolbar / clearText	显示清空工具栏 / 清空按钮文字	boolean / string	false / 清空
ariaLabel	画布可访问名称	string	签名画板

Events

事件	参数	说明
start	指针起始位置 { x, y }	开始一笔绘制
end	Data URL 字符串	一笔绘制结束
change / update:modelValue	Data URL 字符串	绘制结束、清空或生成印章后更新
clear	无	清空画布
seal	Data URL 字符串	生成印章完成

当前版本提供 update:modelValue 输出，但没有读取 modelValue 的属性与图片回填逻辑。请通过 @change 保存签名结果；不要把已有图片传入 v-model 当作回显能力。清空后的 Data URL 仍可能是有效空白图片，是否已签名应调用 isEmptySignature() 判断。

Methods

方法	参数与返回值	说明
submit	(width?, height?, type = 'image/png', quality?) => string	导出 Data URL，默认使用原画布尺寸；未挂载时返回空字符串
clear	无	清空并恢复可绘制状态
isEmptySignature	() => boolean	是否尚未绘制
getStar	(text, text1, text2) => string 或 undefined	生成印章；参数分别为中下部用途、环形单位文字和底部编号

生成印章后画板锁定绘制，可通过 clear() 恢复。示例图形由客户端绘制，不包含数字证书或签名验签流程。

Slots

header 替换标题与状态内容，footer 在画板下方放置附加内容；两个插槽均无参数。