大卡片

介紹

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

引入

UMD 方式

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

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

<script>
const BigCardPopup = window.PolyvProductUIBigCardPopup;
</script>

NPM 方式

// 安装依赖
pnpm add @polyv/product-ui

// 引入组件
import { BigCardPopup } from '@polyv/product-ui';

程式碼範例

<template>
  <div>
    <BigCardPopup
      ref="bigCardRef"
      :product-target="productSDK"
      :product-config="productConfig"
      @direct-buy="onDirectBuy"
    />
  </div>
</template>

<script setup>
import { BigCardPopup } from '@polyv/product-ui';
import { Product } from '@polyv/product-sdk';

// 初始化商品 SDK
const productSDK = new Product(interactionCore, config);
const bigCardRef = ref();

const productConfig = {
  // 商品配置
};

// 直接购买处理
const onDirectBuy = (productData) => {
  console.log('直接购买:', productData);
};

// 打开大卡片
const openBigCard = (productData) => {
  bigCardRef.value?.open(productData);
};

// 关闭大卡片
const closeBigCard = () => {
  bigCardRef.value?.close();
};
</script>

API

BigCardPopup Props

BigCardPopup Events

BigCardPopup 方法

透過 ref 可以呼叫元件的方法：