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