ProductList - 商品列表元件

簡介

商品列表元件用於展示商品櫥窗的核心列表功能，支援商品搜尋、分類篩選、分頁載入、訂單入口等完整的商品展示與管理功能。

包含三個匯出元件：

• ProductList - 商品列表頁面元件
• ProductItem - 商品卡片元件
• ProductListPopup - 商品列表彈窗元件

引入方式

UMD 引入

以 product-list-popup 元件為例，其中 rc-20250814 為目前版本號，請依據實際版本號進行引入。

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

<script>
const ProductListPopup = window.PolyvProductUIProductListPopup;
</script>

NPM 引入

pnpm add @polyv/product-ui

import { ProductList, ProductItem, ProductListPopup } from '@polyv/product-ui';

使用範例

基本用法

<template>
  <ProductListPopup
    ref="productListInnerPopupRef"
    :product-target="productTarget"
    :payment-target="paymentTarget"
    :product-config="productUIConfig"
    @not-support-direct-buy="handleNotSupportDirectBuy"
  />
</template>

<script setup lang="ts">
import { ProductListPopup } from '@polyv/product-ui';

const productListInnerPopupRef = ref();

const productTarget = ref<Product>();
const paymentTarget = ref<Payment>();

const productUIConfig = ref({
  productPayOrderEnabled: true,
  directBuyEnabled: true,
});

function handleNotSupportDirectBuy() {
  // 不支持直接购买时的处理，例如弹出一个提示框
}
</script>

API

ProductList Props

ProductList Events

ProductList Methods

ProductListPopup Props

ProductListPopup Events

ProductItem Props

ProductItem Events