文档
API
文档
API

快速开始

安装项目

npm
yarn
pnpm
bun
npm install poster-kit

React中使用

例子

需要先安装运行时

npm
yarn
pnpm
bun
npm install @stencil/react-output-target
App.tsx
import "./App.css";
import type { CardData } from "poster-kit";
import { KitBox } from "poster-kit/dist/react/components.ts";
import { type ComponentRef, useRef } from "react";
const App = () => {
  const kitBoxRef = useRef<ComponentRef<typeof KitBox> | null>(null);

  function currentDataChange(data: CardData) {
    console.log(data);
  }

  return (
    <div className="content">
      <div className="box">
        <KitBox
          ref={kitBoxRef}
          width={1080}
          height={1920}
          onCurrentDataChange={(e) => currentDataChange(e.detail)}
        />
      </div>
    </div>
  );
};

export default App;

Vue中使用

例子

需要先安装运行时

npm
yarn
pnpm
bun
npm install @stencil/vue-output-target

根据自己的框架安装包

rsbuild.config.ts 或 vite.config.ts
import { defineConfig } from '@rsbuild/core'
import { pluginVue } from '@rsbuild/plugin-vue'
import { pluginBabel } from '@rsbuild/plugin-babel'
import { pluginVueJsx } from '@rsbuild/plugin-vue-jsx'

export default defineConfig({
  html: {
    title: 'poster-kit example vue',
  },
  output: {
    assetPrefix: './',
  },
  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
    }),
    pluginVue({
      vueLoaderOptions: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('kit-'), // 例如所有以 my- 开头的标签
        },
      },
    }),
    pluginVueJsx(),
  ],
})
// 如果使用vite，请使用下面这个写法
// import vueJsx from '@vitejs/plugin-vue-jsx'
// plugins: [
//   vue({
//     template: {
//       compilerOptions: {
//         isCustomElement: (tag) => tag.includes('kit-'),
//       },
//     },
//   }),
//   vueJsx(),
// ],
入口文件 index.ts
import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
// 引入并注册组件 poster-kit
import "poster-kit/dist/vue/index.ts";

const app = createApp(App);

app.mount("#root");
App.vue
<template>
  <div class="content">
    <div class="box">
      <kit-box
        ref="kitBoxRef"
        :width="1080"
        :height="1920"
        @currentDataChange="currentDataChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
  import type { CardData } from "poster-kit";
  import { ref } from "vue";

  const kitBoxRef = ref<HTMLKitBoxElement | null>(null);

  function currentDataChange(e: CustomEvent<CardData>) {
    console.log(e.detail);
  }
</script>

其他框架

可以参考这里html+js的例子

ON THIS PAGE