@composy/stamp-vue

@composy/stamp-vue

适用于 Vue 3 的电子印章适配器，包含预览、编辑、设计、预设图库、组合式 API 和插件。

安装

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

在应用入口导入样式：

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

组件

<script setup lang="ts">
import { createCompanySeal } from '@composy/stamp-core'
import { StampPreview } from '@composy/stamp-vue'

const config = createCompanySeal({
  name: '示例科技有限公司',
  type: 'limited',
})
</script>

<template>
  <StampPreview :config="config" mode="svg" />
</template>

• Stamp：根据配置渲染 SVG 或 Canvas，也支持模板数据。
• StampPreview：带尺寸与阴影选项的预览。
• StampEditor：配置编辑、预设应用和 JSON 导入导出。
• StampDesigner：可视化布局与文字编辑。
• StampGallery：选择并应用预设。

每个组件也提供 LStamp* 别名。完整导出可从包根入口导入，聚合子路径分别为 @composy/stamp-vue/components、@composy/stamp-vue/composables 和 @composy/stamp-vue/plugins。

组合式 API 与插件

import { useStampEditor, useStampPresets } from '@composy/stamp-vue'

const editor = useStampEditor()
editor.applyPreset('limitedCompany')
editor.updateConfig({ topArcText: { text: '示例公司' } })
const json = editor.exportJson()

const { groups } = useStampPresets()

useStampExport() 提供 PNG、JPEG、SVG 与 SVG Base64 导出。createStampPlugin() 可注册全局组件和 $stamp API；createStampEnginePlugin() 可连接符合其 state/event 接口的引擎上下文。

导出组合式 API 支持 ownerDocument（iframe/测试文档）、svgOptions（确定性 ID、标题、描述） 和 toDataURL() 快捷方法：

const exporter = useStampExport({
  ownerDocument: iframe.contentDocument ?? undefined,
  svgOptions: { deterministic: true, title: 'Company stamp' },
})

const svg = exporter.toSVGString(config)
const png = exporter.toDataURL(config, 'png')

样式入口

• @composy/stamp-vue/index.css 与 @composy/stamp-vue/index.min.css
• @composy/stamp-vue/components/Stamp.vue.css 等组件级样式
• @composy/stamp-vue/style/index.css 与 @composy/stamp-vue/style/index.less

样式使用 @composy/color-core 与 @composy/size-core 生成的 --ld-* 变量，可由宿主主题覆盖。

构建产物

pnpm run build 使用 @composy/builder 与 rolldown，生成 dist/、es/、esm/、lib/ 和类型声明；postbuild 会生成聚合子路径、组件 CSS 并同步 ESM 输出。

Builder、ESLint 与 TypeScript 权威配置位于 .ldesign/；包根 eslint.config.js 和 tsconfig*.json 保留兼容入口。

License

MIT