@composy/signature-vue

@composy/signature-vue

基于 @composy/signature-core 的 Vue 3 签名组件和组合式函数。

Vue 3 component and composable built on @composy/signature-core.

安装 / Installation

pnpm add @composy/signature-vue @composy/signature-core

组件用法 / Component

<script setup lang="ts">
import { ref } from 'vue'
import { SignaturePad } from '@composy/signature-vue'

const padRef = ref<InstanceType<typeof SignaturePad>>()
const exportPng = () => {
  const dataUrl = padRef.value?.toDataURL('png')
  if (!dataUrl) return

  const link = document.createElement('a')
  link.href = dataUrl
  link.download = 'signature.png'
  link.click()
}
</script>

<template>
  <SignaturePad ref="padRef" :width="600" :height="200" />
  <button @click="exportPng">Export PNG</button>
</template>

组件 Props：width、height、disabled 和 config。组件事件：begin、change、end、cancel。当浏览器取消指针或丢失指针捕获时， cancel 会在未完成笔画被丢弃后触发。组件 ref 暴露清空、撤销/重做、导入导出、配置更新、启用状态切换和 getInstance()。

The component accepts width, height, disabled, and config props and emits begin, change, end, and cancel. cancel is emitted after an incomplete stroke is discarded because pointer input was cancelled or pointer capture was lost. Its template ref exposes clear, undo/redo, import/export, configuration, enabled-state methods, and getInstance().

组合式函数 / Composable

<script setup lang="ts">
import { ref } from 'vue'
import { useSignature } from '@composy/signature-vue'

const canvasRef = ref<HTMLCanvasElement | null>(null)
const { canUndo, undo, toDataURL } = useSignature(canvasRef, {
  width: 600,
  height: 200,
})
</script>

<template>
  <canvas ref="canvasRef" />
  <button :disabled="!canUndo" @click="undo">Undo</button>
</template>

useSignature() 返回 Canvas 和实例引用、空状态、撤销/重做状态、笔画数、启用状态，以及初始化、编辑、导入、导出和配置更新方法。配置可以是普通对象或 Vue Ref。

useSignature() returns the Canvas and instance refs, empty/undo/redo state, stroke count, enabled state, and initialization, editing, import, export, and configuration methods. Configuration may be a plain object or a Vue Ref.

样式 / Styles

先初始化应用中的 @composy/color-core 颜色令牌与 @composy/size-core 尺寸令牌，再导入 Vue 样式：

import '@composy/signature-vue/index.css'

组件样式通过 --ld-signature-* 别名引用生成的 --ld-* 颜色令牌，以及 --ld-px-*、--ld-radius-* 和 --ld-font-* 尺寸令牌。应用可通过这些别名覆盖样式：

:root {
  --ld-signature-border: var(--ld-primary-200);
  --ld-signature-border-width: var(--ld-px-2);
  --ld-signature-radius: var(--ld-radius-md);
}

Initialize the application's @composy/color-core and @composy/size-core tokens before importing @composy/signature-vue/index.css. Component styles use signature aliases backed by generated color and size tokens.

构建产物 / Build outputs

The package is built with @composy/builder and rolldown. Its postbuild step generates styles, normalizes package outputs, and checks exported targets.

The authoritative builder, ESLint, and ESM/CJS TypeScript configurations are in .ldesign/. Package-root eslint.config.js and tsconfig*.json are compatibility entries.

License

MIT