@certificate-kit/vue2

Vue 2 证书 Poster 组件，依赖 @certificate-kit/runtime 渲染引擎。

用法

// vue.config.js
alias: {
  '@certificate-kit/runtime': '.../runtime/dist/index.cjs',
  '@certificate-kit/vue2': '.../vue2/src/index.js',
  '@certificate-kit/vue2/styles/cert.css': '.../vue/src/styles/cert.css'
}

// main.js
import { injectFontFaces } from '@certificate-kit/runtime'
import { kitConfig } from '@/certificate-kit'
import '@certificate-kit/vue2/styles/cert.css'
injectFontFaces(kitConfig)

new Vue({
  provide: { certificateKitConfig: kitConfig },
  // ...
})

<template>
  <CertificatePoster ref="posterRef" :template="detail.template" :record="detail" />
</template>

<script>
import { CertificatePoster } from '@certificate-kit/vue2'
import { downloadCertificateFlow } from '@certificate-kit/runtime'

export default {
  components: { CertificatePoster },
  methods: {
    async download() {
      await downloadCertificateFlow(this.detail, this.$refs.posterRef, kitApi, kitConfig)
    }
  }
}
</script>

导出

• CertificatePoster — 需实现 exportPng()，供下载流程调用