ProductList - Product List Component

Introduction

The Product List component is used to display the core list functionality of a product showcase. It supports product search, category filtering, pagination loading, order entry, and other complete product display and management features.

It includes three exported components:

• ProductList - Product list page component
• ProductItem - Product card component
• ProductListPopup - Product list popup component

Import Methods

UMD Import

Using the product-list-popup component as an example, 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/product-list-popup.umd.js"></script>

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

NPM Import

pnpm add @polyv/product-ui

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

Usage Examples

Basic Usage

<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