km-card-layout-component-web

参照 km-card-layout-component-miniprogram 的同构 Web 版本，复用同一套 layout + data 数据结构，支持：

• web / h5 原生 DOM 渲染
• custom element
• Vue 3
• React
• 双面名片翻转
• 触摸左右滑动切换
• 导出当前名片 PNG
• 导出分享封面 PNG

Package Demo

The runnable demo lives in this package under demo/. It reuses the same layouts and cardData shape as:

packages/km-card-layout-component-miniprogram/example/pages/home/index.js

Run locally from this package directory:

pnpm install
pnpm demo

Build the demo:

pnpm demo:build

Release a new package version:

pnpm release

Or run it from the repo root:

pnpm release:web

Default dev URL:

http://localhost:3301

安装

pnpm add km-card-layout-component-web km-card-layout-core

如果使用 Vue / React，再安装对应运行时。

Web / H5

import { createCardLayoutRenderer } from "km-card-layout-component-web";

const renderer = createCardLayoutRenderer(document.getElementById("card")!, {
  layout: layouts,
  data: cardData,
  shareStyleId: 1,
});

const cardImage = await renderer.exportCard();
const shareImage = await renderer.exportShareImage();

Custom Element

import { defineKmCardLayoutElement } from "km-card-layout-component-web";

defineKmCardLayoutElement();

const el = document.querySelector("km-card-layout-web");
el.layout = layouts;
el.data = cardData;

<km-card-layout-web></km-card-layout-web>

Vue 3

<script setup lang="ts">
import { KmCardLayoutVue } from "km-card-layout-component-web/vue";
</script>

<template>
  <KmCardLayoutVue
    :layout="layouts"
    :data="cardData"
    @active-index-change="(index) => console.log(index)"
  />
</template>

React

import { KmCardLayoutReact } from "km-card-layout-component-web/react";

export function Demo() {
  return <KmCardLayoutReact layout={layouts} data={cardData} shareStyleId={1} />;
}

API

统一支持以下核心参数：

• layout: 和小程序组件一致的 CardLayoutSchema[]
• data: 和小程序组件一致的绑定数据，至少包含 user
• defaultActiveIndex: 初始展示面，默认 0
• shareStyleId: 分享封面样式 ID
• showToggle: 是否显示翻面按钮
• responsive: 是否按容器宽度自适应缩放，默认 true
• enableSwipe: 是否启用移动端左右滑动翻面，默认 true
• customRenderers: 自定义 custom 节点渲染器，支持按 id / key / binding 绑定

实例方法：

• toggle()
• setActiveIndex(index)
• exportCard()
• exportShareImage()
• getState()

说明

• 当前保持和小程序版一致的双面逻辑，只渲染前两张布局作为正反面。
• custom 节点支持插入原生 DOM / Vue / React 渲染结果，但导出图片时，复杂外链资源仍受浏览器跨域策略影响。