SmallCard - Small Card Component

Introduction

The small card component is primarily used to display products during live streaming. It can be pushed via the management backend, teaching assistants, and other endpoints.

Import Methods

UMD Import

Where rc-20250814 is the current version number. Please import according to the actual version number.

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

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

NPM Import

pnpm add @polyv/product-ui

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

Usage Examples

Basic Usage

<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