ProductPendant - 商品掛件元件

簡介

商品掛件是一個入口元件，點擊後可以查看商品列表。

引入方式

UMD 引入

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

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

<script>
const MobileProductPendant = window.PolyvProductUIMobileProductPendant;
const PcProductPendant = window.PolyvProductUIPcProductPendant;
</script>

NPM 引入

pnpm add @polyv/product-ui

import { MobileProductPendant, PcProductPendant } from '@polyv/product-ui';

使用範例

行動端掛件

<template>
  <MobileProductPendant
    :product-target="productTarget"
    @click-pendant="handleClickPendant"
  />
</template>

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

const productTarget = new Product(interactionCore, { getProductConfig });

function handleClickPendant() {
  console.log('点击商品挂件');
  // 打开商品列表弹窗
}
</script>

PC 端掛件

<template>
  <PcProductPendant
    :product-target="productTarget"
    @click-pendant="handleClickPendant"
  />
</template>

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

const productTarget = new Product(interactionCore, { getProductConfig });

function handleClickPendant() {
  console.log('点击商品挂件');
  // 打开商品列表弹窗
}
</script>

API

MobileProductPendant Props

MobileProductPendant Events

PcProductPendant Props

PcProductPendant Events