@composy/certificate-vue

@composy/certificate-vue

@composy/certificate-core 的 Vue 3 适配层，提供 CertificateRenderer 组件和 useCertificate() composable。核心渲染与编辑逻辑仍由 core 负责，Vue 层只处理生命周期、事件和响应式桥接。

特性

• Vue 3 SFC 组件，支持 v-model:config 受控使用。
• useCertificate() 暴露 core 的常用编辑、导出、数据源和图层 API。
• fromJSON() 和 config ref 使用 Core 归一化后的快照；setZoom() 反映实际钳制后的缩放值。
• destroy()/组件卸载会清空 certificate、config 和选中状态，避免保留已销毁实例的响应式引用。
• 组件根 class 为 ldesign-certificate-vue，内部挂载点为 ldesign-certificate-vue__mount。
• core 注入的编辑器 class 统一使用 ldesign-certificate-*。
• 样式使用 LDesign --ld-* color/size tokens；Vue 适配层样式可通过 @composy/certificate-vue/index.css 导入。

快速开始

<script setup lang="ts">
import type { Certificate, CertificateConfig } from '@composy/certificate-vue'
import { CertificateRenderer, getTemplate } from '@composy/certificate-vue'
import { ref } from 'vue'
import '@composy/certificate-vue/index.css'

const template = getTemplate('achievement')
if (!template) throw new Error('Built-in achievement template is unavailable')

const config = ref<CertificateConfig>(template.config)

function onReady(certificate: Certificate) {
  certificate.setDataSource({
    name: 'Ada Lovelace',
    date: '2026-06-09',
  })
}
</script>

<template>
  <CertificateRenderer
    v-model:config="config"
    :readonly="false"
    :zoom="1"
    theme="dark"
    @ready="onReady"
  />
</template>

v-model:config 会跳过组件内部刚刚 emit 的相同配置，避免外部受控回灌造成历史栈污染。

Composable

<script setup lang="ts">
import { useCertificate } from '@composy/certificate-vue'

const { containerRef, insertText, setBackground, setDataSource, download } = useCertificate({
  readonly: false,
  toolbar: true,
  config: {
    width: 800,
    height: 566,
    background: 'var(--ld-gray-50)',
    elements: [],
  },
})

insertText({
  content: 'Certificate',
  color: 'var(--ld-primary-500)',
})
setBackground('var(--ld-warning-50)')
setDataSource({ name: 'LDesign' })
await download('certificate', { format: 'png', scale: 2 })
</script>

<template>
  <div ref="containerRef" />
</template>

公开能力

组件 defineExpose() 与 useCertificate() 均提供常用操作：

• 元素：addElement、updateElement、removeElement、duplicateElement
• 插入：insertText、insertShape、insertField、promptImageInsert
• 画布：setBackground、setBackgroundImage、setBackgroundRepeat、setSize、setZoom
• 编排：bringToFront、sendToBack、alignElement
• 状态：lockElement、toggleLock、hideElement、toggleHide
• 数据：setDataSource、getDataSource
• 序列化：toJSON、fromJSON
• 导出：exportToDataURL、exportToBlob、download

导出选项继承 Core 的 ExportOptions，包括 maxPixels 像素预算；跨 iframe 使用时，Core 会从挂载容器推导 ownerDocument。

构建产物

pnpm --filter @composy/certificate-vue build 会生成：

• dist/index.js、dist/index.min.js
• dist/index.css、dist/index.min.css
• es/**
• esm/**
• lib/**
• 对应 .d.ts 类型声明

构建配置位于 .ldesign/builder.config.ts，在框架无关 Core 构建后使用 @composy/builder 和 rolldown 打包；ESLint 与 ESM/CJS TypeScript 配置集中在 .ldesign/。根目录的旧配置文件保留为兼容转发。

命令

pnpm --filter @composy/certificate-vue type-check
pnpm --filter @composy/certificate-vue type-check:cjs
pnpm --filter @composy/certificate-vue build

License

MIT