SmallCard - 小卡片元件

簡介

小卡片元件主要用於直播時展示商品，可透過管理後台、助教等端推送。

引入方式

UMD 引入

其中 rc-20250814 為目前版本號，請依據實際版本號進行引入。

<script src="https://websdk.videocc.net/product-ui/rc-20250814/small-card.umd.js"></script>

<script>
const SmallCard = window.PolyvProductUISmallCard;
</script>

NPM 引入

pnpm add @polyv/product-ui

import { SmallCard } from '@polyv/product-ui';

使用範例

基本用法

<template>
  <SmallCard
    :product-target="productTarget"
    :product-config="productConfig"
    :current-pushing-product-id="currentPushingProductId"
    @direct-buy="handleDirectBuy"
    @close="handleClose"
  />
</template>

<script setup>
import { SmallCard } from '@polyv/product-ui/product-pendant';

const productTarget = new Product(interactionCore, { getProductConfig });
const productConfig = { 
  productHotEffectEnabled: true,
  outLinkProductRedirectEnabled: true 
};
const currentPushingProductId = ref(null);

function handleDirectBuy(product) {
  console.log('直接购买', product);
}

function handleClose() {
  console.log('关闭小卡片');
}
</script>

API

SmallCard Props

SmallCard Events