signture

一个基于 Vue 3 的手写签名组件，支持触控/鼠标绘制、预览原图、重签与上传。

安装

npm i signture
# 或
pnpm add signture

快速使用

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Signture from 'signture'

createApp(App)
  .component('Signture', Signture)
  .mount('#app')

<template>
  <Signture v-model="img" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const img = ref<string | null>(null)
</script>

说明：

• 组件通过 v-model 同步签名图片的相对路径（由后端返回）。
• 若你需要为预览拼接域名，可设置环境变量 VITE_API_URL。

Props & Events

• modelValue: string | null
  • 说明：签名图片相对路径（v-model）。
  • 默认：null

事件：

• update:modelValue(value: string | null)
• uploadSuccess(imgUrl: string)
• uploadFail(errMsg: string)

预览本地示例

项目内自带示例页面，支持边改边看：

pnpm i
pnpm dev
# 浏览器打开 http://localhost:5173

构建与发布（维护者）

# 构建
pnpm build

# 发布到 npm（需要先 npm login 并使用官方源）
npm publish --access public

注意：每次发布需要递增 package.json 的 version。

开发提示

• 组件源码：src/components/Signture.vue
• 绘制核心：src/components/sign.js
• 示例入口：example/
• 构建配置：vite.config.js（库模式 + 示例 root）

License

MIT