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